ホームページ  >  記事  >  ウェブフロントエンド  >  jquery は最もシンプルで使いやすいフォーム検証プラグインです。

jquery は最もシンプルで使いやすいフォーム検証プラグインです。

WBOY
WBOYオリジナル
2016-05-16 18:33:49853ブラウズ
コードをコピー コードは次のとおりです:

/*
Jquery フォーム検証プラグイン
janchie 2010.1 janchie@163.com
バージョン 1.01
*/
(function($){
$ .fn .extend({
valid:function(){
if( ! $(this).is("form") ) return;
//パラメータを取得
var items = $. isArray( 引数[0]) ? 引数[0] : [],
isBindSubmit = 引数の種類[1] ==="ブール値" 引数[1] :true,
isAlert = 引数の種類[2] == ="boolean" ? argument[2] :false,
//検証ルール
rule = {
// 通常のルール
"eng" : /^[A-Za-z] $/ ,
"chn" :/^[u0391-uFFE5] $/,
"mail" : /w ([- .]w )*@w ([-.]w )*.w ( [- .]w )*/,
"url" : /^http[s]?://[A-Za-z0-9] .[A-Za-z0-9] [/=?% -&_ ~`@[]': !]*([^<>""])*$/,
"通貨" : /^d (.d )?$/,
"数値" : /^d $/,
"int" : /^[0-9]{1,30}$/,
"double" : /^[- ]?d (.d )?$ /,
"ユーザー名" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/,
"パスワード" : /^(w){6,20}$/,
"安全" : />|<|,|[|]|{|}|?|/| |=|||'| \| "|:|;|~|!|@|#|*|$|%|^|&|(|)|`/i,
"dbc" : /[ステA-Z0-9!@#¥%^&*()_+{}[]|:"';.,/?<>`~ ]/,
"qq" : /[1-9][0-9]{4,}/,
"日付" : /^((((1[6-9] |[2-9]d)d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]d|3[01]))|(( (1[6-9]|[2-9]d)d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]d|30) )|(((1[6-9]|[2-9]d)d{2})-0?2-(0?[1-9]|1d|2[0-8]))|( ((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579] ][26])00))-0?2-29-))$/,
"年" : /^(19|20)[0-9]{2}$/,
"月" : /^(0?[1-9]|1[0-2])$/,
"日" : /^((0?[1-9])|((1|2)[ 0-9])|30|31)$/,
「時間」 : /^((0?[1-9])|((1|2)[0-3]))$/,
「分」 : /^((0?[1-9])|((1|5)[0-9]))$/,
「秒」 : /^((0?[1 -9])|((1|5)[0-9]))$/,
"モバイル" : /^(((d{2,3}))|(d{3}-)) ?13d{9}$/,
"電話" : /^[ ]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1 ,12}) $/,
"郵便番号" : /^[1-9]d{5}$/,
"ボディカード" : /^((1[1-5])|(2[ 1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12]) |91)d{4}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0 [13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468] [048]|0[48])0229))d{3}(d|X|x)?$/,
"ip" : /^(d{1,2}|1dd|2[0- 4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[ 0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/,
"ファイル": / ^[A-Za-z0-9] ((.|-)[A-Za-z0-9] )*.[A-Za-z0-9] $/,
"画像" : /. .(jpg|gif|png|bmp)$/i,
"単語" : /. .(doc|rtf|pdf)$/i,
// 関数数规则
"eq": function(arg1,arg2){ return arg1==arg2 ? true:false;},
"gt": function(arg1,arg2){ return arg1>arg2 ? true:false;},
"gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;},
"lt": function(arg1,arg2){ return arg1"lte": function(arg1,arg2){ return arg1<=arg2 ? true:false;}
},
//简单验证示唆信息后缀
msgSuffix = {
"eng" : "只能输入英文" ,
"chn" : "只能输入汉字",
"mail" : "格式不正确",
"url" : "格式不正确",
"currency" : "数字格式有误",
"number" : "只能は数字",
"int" : "只能は整数",
"double" : "只能は带小数的数字",
"username" :"只能である数字と英文および下划線との組み合わせ、パスワードは文字母、4-20 文字",
"パスワード" : "ただ有効は数字と英文および下划線との組み合わせ、6-20 文字",
"safe" : "特殊文字符不可"、
"dbc" : "全角文字符不可"、
"qq" : "格式不正确"、
"date" : "格式不正确" 、
"年" : "不正确"、
"月" : "不正确"、
"日" : "不正确"、
"時間" : "不正确"、
"分" :"不正确",
"秒" :"不正确",
"モバイル" : "格式不正确",
"電話" : "格式不正确",
"zipcode" : "格式不正确"、
"bodycard" : "格式不正确"、
"ip" : "IP不正确"、
"file": "类型不正确" 、
"image" : "类型不正确"、
"word" : "类型不正确"、
"eq": "不等以下"、
"gt": "不大より" 、
"gte": "不大以上または等以下",
"lt": "不小以下",
"lte": "不小以下または等以下"
},
msg = "", formObj = $(this) , checkRet = true, isAll,
tipname = function(namestr){ return "tip_" namestr.replace(/([a-zA-Z0-9])/g," -$1"); },
//规则类型適合检测
typeTest = function(){
var result = true,args = argument;
if(rule.hasOwnProperty(args[0])){
var t = rules[args[0]], v = args[1];
結果 = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v));
}
結果を返します。
},
//错误情報提示 ****** 自定修正 ******
showError = function(fieldObj,filedName,warnInfo){
checkRet = false;
fieldObj.css("背景","#FFDFDD");
vartipObj = $("#"tipname(filedName));
if(tipObj.length>0)tipObj.remove();
vartipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after(" " warnInfo " ");
if(isAlert && isAll) msg​​ = "n" warnInfo;
//if(isAlert && !isAll)alert(warnInfo);
},
//正确情報提示 ****** 自定修正 ******
showRight = function(fieldObj,filedName){
fieldObj.css("background" ,"#CCFFCC");
vartipObj = $("#"tipname(filedName));
if(tipObj.length>0)tipObj.remove();
vartipPosition = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1);
tipPosition.after(" 正确 ");
},
//適合比值のヒント名
findTo = function(objName){
var find;
$.each(items, function(){
if(this.name == objName && this.simple){
find = this.simple; return false;
}
} );
if(!find) find = $("[name='" objName "']")[0].name;
検索結果を返します。
},
//単一要素の検証
fieldCheck = function(item){
var i = item, field = $("[name='" i.name "']",formObj[0]) ;
if(!field[0]) return;
var warnMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? true;
if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){
warnMsg = i.message|| i.simple "選択なし";
showError(field ,i.name, warnMsg);
}else if (isRq && fv == "" ){
warnMsg .message|| i.simple ( field.is("select") ? "選択なし" :"空にすることはできません" );
showError(field ,i.name, warnMsg); fv != ""){
if(i.min || i.max){
var len = fv.length, min = i.min 0, max = i.max; warnMsg = i.message || (max? i.simple "長さの範囲は " min "~" max "":i.simple "長さは " min " より大きくなければなりません
if( (max) && (len> ;max || lenshowError(field ,i.name, warnMsg);
>if( i.type){
var matchVal = i.to ? $.trim($("[name='" i.to "']").val()) :i.value; >var matchRet = matchVal ? typeTest(i.type,fv,matchVal) :typeTest(i.type,fv);
warnMsg = i.simple msgSuffix[i.type]; (matchVal && i.simple) warnMsg = (i.to ? findTo(i.to) "値" :i.value);
if(!matchRet) showError(field ,i.name, warnMsg); 🎜>else showRight(field,i.name);
}else{
showRight(field,i.name)
}
}else if (isRq){
showRight(field) ,i.name);
}
},
//要素グループの検証
validate = function(){
$.each(items, function(){isAll=true; fieldCheck (これ) ;});
if(isAlert && msg != ""){
alert(msg) = "";
return checkRet; 🎜>/ /単一要素イベント バインディング
$.each(items, function(){
var field = $("[name='" this.name "']",formObj[0]);
if(field.is(":hidden")) return;
var obj = this,toCheck = function(){ isAll=false;
if(field.is() ": ファイル") || field.is("select")){
field.change(toCheck);
field.blur(toCheck); }) ;
//イベントバインディングを送信します
if(isBindSubmit) {
$(this).submit(validate);
return validate();
}
});
})(jQuery);


パラメータと説明:
------ - ---設定パラメータ:-----------
-------- フォーム--------
valid(fileds,isBindSubmit,isAlert)
パラメータ 1 はフォーム項目配列 (Json モード)、必須です
パラメータ 2 はフォームが手動呼び出し検証結果であるかどうかです。デフォルトは true です。自動検証送信イベント。
パラメータ 3 は、検証情報のアラート プロンプト メソッドです。デフォルトは [いいえ] です (オプション)。
-------- フォーム項目配列 --------
name: フォームフィールドの名前、必須
type: 検証タイプ、オプション
simple: 単純なプロンプト メッセージ、ドメインの中国語名のみを入力してください [推奨]
メッセージ: 単純なプロンプト メッセージを置き換える完全なプロンプト メッセージ
require: 必須かどうか、デフォルトは true、つまり必須です。false はオプションです。オプションの
to: 一致する値の比較、オブジェクトの名前、オプションの
value: 直接一致する値の比較、to がある場合、値は無視されます、オプションの
min: 最小長、オプションの
max: 最大長、オプション
ajax: 非同期検証の結果を取得するアドレス、オプション
****** タイプ 検証タイプは次のとおりです: ******
eng:英語
chn: 漢字
mail: email
url: URL
currency: 通貨
number: 数値
int: 整数
double: 浮動小数点数
ユーザー名: 数字と英語と下線 文字で始まる and. の組み合わせ、4 ~ 20 文字
パスワード: 数字、英語、アンダースコアの組み合わせ、6 ~ 20 文字
安全: 特殊文字は含まれません
dbc:全角文字を含む((漢字は除く)
qq:5~9桁
日付:時刻
年:年
月:月
日:日
時: 時
分: 分
秒 秒
モバイル: 携帯電話
電話: 電話番号
郵便番号: 郵便番号
ボディカード: ID カード、15 桁、18 桁、 x 文字
ip: IP
file: ファイル タイプ
image: 画像ファイル タイプ
word: ドキュメント ファイル タイプ
**** 次のタイプには一致するオブジェクトまたは値が必要です****
eq: =
gt: > ;
gte:>=
lt: <
lte:<=
シンプルで簡単な方法とは何ですか? ? ?
コードを見てください:




コードをコピーします


コードは次のとおりです:


$(function(){
$("form").valid([
//検証選択
{ name:"checkbox",simple:"複数選択" },
// Empty
{ name:"username",simple:"username"},
//必須ではない場合、検証のために必須です。email type{ name:"email",type: "mail",simple:"Email ",require:false } ]) }) デモ コード パッケージのダウンロード
http://xiazai.jb51.net /201002/yuanma/jquery_checkform.rar
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。