jQueryフォーム検証プラグインvalidatorの使用方法詳細
validatorプラグイン：jquery実装の通常の操作をカプセル化し、プラグインの使用法を学ぶだけで、簡単なコードを使って、より複雑な機能を実現することができます。
validatorの基本使用
1.導入するファイル
①jQueryライブラリ
②プラグインのjsファイル公式サイト
2.フォーム検証プラグインvalidatorの基本文法
ルール名を検証することによって検証ルールを使用し、このルールに対応するエラーメッセージ情報をメッセージに定義する。
注:「"フォームの選択」はフォームjQueryオブジェクトです。
拡張：エラーメッセージが私たちの予想した位置に表示されない場合、私たちは間違った表示ラベルをカスタマイズできます。
構文:
事前に定義された検査規則が需要を満たしていない場合は、ユーザー定義の検査規則を実行することができます。
カスタム検証文法:
本論文はすでに「jqueryフォーム検証大全書」まで整理されました。皆さん、勉強して読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
validatorの基本使用
1.導入するファイル
①jQueryライブラリ
②プラグインのjsファイル公式サイト
2.フォーム検証プラグインvalidatorの基本文法
ルール名を検証することによって検証ルールを使用し、このルールに対応するエラーメッセージ情報をメッセージに定義する。
<!-- -->
<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>
<!-- validator -->
<script>
$("form ").validate({
rules:{//
name:{
: ,
...
:
},
...,
name:{
: ,
...
:
}
},
messages:{//
name:{
: " ",
...
: " "
},
...,
name:{
: " ",
...
: " "
}
}
});
</script>注:「"フォームの選択」はフォームjQueryオブジェクトです。
拡張：エラーメッセージが私たちの予想した位置に表示されない場合、私たちは間違った表示ラベルをカスタマイズできます。
構文:
// ，
<label class="error" for=" name"></label>事前に定義された検査規則が需要を満たしていない場合は、ユーザー定義の検査規則を実行することができます。
カスタム検証文法:
$.validator.addMethod(" ",function(value, element, params){
//value： （ value ）
//element：
//params： ， 。（ ）
// ， true； false
}, " ");
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
width: 30%;
/* */
/* margin: 0 auto; */
/* magin:atuo */
margin:auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
td {
padding: 8px 2px;
}
.error {
color: red;
}
</style>
</head>
<body>
<form name="empForm" id="empForm" method="get" action="#">
<table>
<tr>
<td> </td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td> </td>
<td><input type="password" id="pwd" name="pwd" /></td>
</tr>
<tr>
<td> </td>
<td><input type="password" id="pwd2" name="pwd2" /></td>
</tr>
<tr>
<td> </td>
<td>
<input type="radio" id="male" value="m" name="sex" />
<input type="radio" id="female" value="f" name="sex" />
<label class="error" for="sex"></label>
</td>
</tr>
<tr>
<td> </td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td align="left"> :</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left"> :</td>
<td><input type="text" id="idcard" name="idcard" /></td>
</tr>
<tr>
<td> </td>
<td>
<select name="edu" id="edu">
<option value="">－ －</option>
<option value="a"> </option>
<option value="a"> </option>
<option value="a"> </option>
<option value="a"> </option>
<option value="a"> </option>
<option value="b"> </option>
<option value="c"> </option>
<option value="e"> </option>
<option value="d"> </option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<input type="checkbox" name="hobby" id="coding" value="0" />
<input type="checkbox" name="hobby" id="read" value="1" />
<input type="checkbox" name="hobby" id="ball" value="2" />
<label class="error" for="hobby"></label>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="smtBtn" value=" "></td>
</tr>
</table>
</form>
<!-- jQuery -->
<script src="js/jquery-3.3.1.js"></script>
<!-- validator -->
<script src="js/jquery.validate.min.js"></script>
<script>
$("#empForm").validate({
rules:{//
username:{
required: true,
maxlength:5,
},
pwd:{
required: true,
rangelength:[6,10]
},
pwd2:{
required:true,
rangelength:[6, 10],
equalTo:"#pwd"
},
sex:{
required:true
},
age:{
required:true,
range:[18, 70],
digits:true
},
email:{
required:true,
email:true
},
idcard:{
required:true,
card:true
},
edu:{
required:true
},
hobby:{
required:true
},
},
messages:{//
username:{
required: " ",
maxlength:" 5 "
},
pwd:{
required: " ",
rangelength:" 6~10 "
},
pwd2:{
required:" ",
rangelength:" 6~10 ",
equalTo:" "
},
sex:{
required:" "
},
age:{
required:" ",
range:" 18~70 ",
digits:" "
},
email:{
required:" ",
email:" "
},
idcard:{
required:" ",
card:" "// ， ，
},
edu:{
required:" "
},
hobby:{
required:" "
}
}
})
//
$.validator.addMethod("card",function(value, element, params){
//value： （ value ）
//element：
//params： ， 。（ ）
// ， true； false
// ：15 ， 18 ， 17 +X
var reg = /^\d{15}(\d{2}[\dx])?$/i;//
var result = reg.test(value);
return result;
}," ");
</script>
</body>
</html>本論文はすでに「jqueryフォーム検証大全書」まで整理されました。皆さん、勉強して読んでください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。