jquery-validation是一款前端经验js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。
官方网站 https://jqueryvalidation.org/
源码网站 https://github.com/jquery-validation/jquery-validation
基本使用
第一步，引入jquery.js
|
1
|
|
第二步，引入js
|
1
|
<script src="js/jquery.validate.js"></script> |
第三步，在表单中添加属性required
<form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>请提供您的姓名，电子邮件地址（不发表）和评论</legend> <p> <label for="cname" style="margin-left:32px">名称 </label> <input id="cname" name="name" minlength="2" type="text" required> </p> <p> <label for="cemail">邮件地址 </label> <input id="cemail" type="email" name="email" required> </p> <p> <label for="curl" style="margin-left:32px">网址 </label> <input id="curl" type="url" name="url"> </p> <p> <label for="ccomment">你的评论 </label> <textarea id="ccomment" name="comment" required></textarea> </p> <p> <input class="submit" type="submit" value="提交" style="margin-left:20%"> </p> </fieldset> </form>
在表单组件内添加属性required，表示这个组件是必填字段。
第四步，使验证生效。
|
1
2
3
|
$().ready(function() { $("#commentForm").validate();}); |
默认校验规则
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
required:true 必输字段remote:"check.php" 使用ajax方法调用check.php验证输入值email:true 必须输入正确格式的电子邮件url:true 必须输入正确格式的网址date:true 必须输入正确格式的日期dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性number:true 必须输入合法的数字(负数，小数)digits:true 必须输入整数creditcard: 必须输入合法的信用卡号equalTo:"#field" 输入值必须和#field相同，用于比较密码相同否 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）maxlength:5 输入长度最多是5的字符串(汉字算一个字符)minlength:10 输入长度最小是10的字符串(汉字算一个字符)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)range:[5,10] 输入值必须介于 5 和 10 之间max:5 输入值不能大于5min:10 输入值不能小于10 |
自定义消息提示
第一步和第二步同上面的基本使用一样。
第三步，表单DOM
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>完整验证表单</legend>
<p>
<label for="firstname" style="margin-left:32px">名称</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname" style="margin-left:32px">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username" style="margin-left:16px">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password" style="margin-left:32px">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">重复密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">邮件地址</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">请同意我们的协议</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我想收到时事通讯。</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>请选择两项</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">选项1
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">选项2
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic">选项3
</label>
<br>
<label for="topic" class="error">请选择至少两个您想接收的主题。</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交" style="margin-left:20%">
</p>
</fieldset>
</form>
第四步，自定义验证消息
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password" //两次密码比较
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: { // 消息可以自定义
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必须由至少2个字符组成"
},
password: {
required: "请输入密码",
minlength: "您的密码必须至少有5个字符长。"
},
confirm_password: {
required: "请输入密码",
minlength: "您的密码必须至少有5个字符长。",
equalTo: "请再次输入密码"
},
email: "请输入有效的电子邮件地址",
agree: "请接受我们的政策",
topic: "请选择至少2个主题"
}
});
按钮点击时验证
使用mvc模式下会采用上面的验证方法，但在ajax提交请求时，表单按钮类型是button不是submit。这时便是按钮点击验证，不是表单提交验证。
|
1
2
3
4
|
<form id="buttonForm"> <input type="text" name="userName" id="userName"/> <button type="button" id="btn-query" onclick="save()">提交</button></form> |
表单提交的按钮类型不是submit，而是button。正常情况不会执行$("#buttonForm").validate({})
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$("#buttonForm").validate({ rules: { userName: { required: true, minlength: 2, } }, messages: { username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" } }}); |
要执行$("#buttonForm").validate({})，必须在按钮关联的save()方法里调用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//提交方法function save() { // 调用验证，返回验证结果。验证结果是boolean值，验证成功为true，否则为false; var flag = $("#buttonForm").valid(); if(!flag){ //没有通过验证，退出当前函数，后面的ajax保存不执行 return; } var data = $("#buttonForm").serializeArray(); $.ajax({ url: "save.do", data: data, success: function(data){ } });} |