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){
}
});
} |