黑马程序员技术交流社区
标题: 【广州前端】- jquery validate强大的jquery表单验证插件 [打印本页]
作者: 李盼盼老师 时间: 2017-12-17 13:03
标题: 【广州前端】- jquery validate强大的jquery表单验证插件
本帖最后由 李盼盼老师 于 2017-12-21 20:17 编辑
jquery validate强大的jquery表单验证插件
【简介】
form表单验证是网站建设中,前端必须做的事情之一,而要自己想一个玩美的没有bug的表单验证,是非常不容易的,这里给大家分享一个基于jquery的强大的表单验证插件,几乎可以满足我们对表单验证的需求, 如果你的网站不可使用jquery,那很抱歉,你无法使用这个插件!
【jquery validate表单验证如何使用】
在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js
[JavaScript] 纯文本查看 复制代码
<script src="jquery-1.8.2.min.js"></script>
<scriptsrc="jquery.validate.js"></script>
一、关键代码介绍
1. html代码
[HTML] 纯文本查看 复制代码
<form action="js/test.json" method="post" class="bl-form bl-formhor" id="jsForm">
<ul>
<li class="bl-form-group">
<label><em>*</em>必填：</label>
<div class="controls">
<input id="pwdid" class="fn-tinput" data-rule-remote="http://www.baidu.com" type="password" name="OldPassword" placeholder="原始密码" required data-msg-required="请输入原始密码" minlength="6" data-msg-minlength="至少输入6个字符" />
</div>
</li>
</li>
<li class="bl-form-group">
<label>手机：</label>
<div class="controls">
<input type="text" value="" name="3" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" />
</div>
</li>
………….
<li class="bl-form-group bl-form-btns">
<label class="fn-vhid">提交：</label>
<div class="controls">
<button class="fn-btn btn-primary btn-submit submitBtn" type="submit">提交按钮</button>
<button type="reset" class="fn-btn">重置</button>
</div>
</li>
</ul>
</form>
2. Css代码
表单的样式是随手写了一下，只是看起来稍微好看一点，样式不是重点，验证规则与书写方法和样式无关，可以自行定义
3. Js代码
[JavaScript] 纯文本查看 复制代码
$(function(){
//$('.jsForm') 是你的表单的类名或者 id，如果是id的话就是 $('#jsForm')
//submitHandler 就是表单验证通过的时候执行里面的函数
$('.jsForm').validate({
submitHandler: function (form) {
var $form = $(form),
data = $form.serialize(); //序列化表单数据
//这里是jquery表单验证通过的时候执行的操作，比如这里，表单验证通过的时候执行了jquery的ajax的post操作
$.post('js/test.json',{data:data},function(d){
if(d.Flag){
alert("如果返回为真，将执行这里代码")
}else{
}
},'json');
},
onfocusout: function(element){ //这个设置是,让表单元素失去焦点后,就验证, 如果不需要,则删掉
$(element).valid();
}
});
})二、jquery validate默认验证规则的提示语中文化
因为jquery validate插件中的提示词，默认是英文的，所以我们先把它中文化
$.extend($.validator.messages, {
required: "必填",
remote: "请修正该字段",
email: "电子邮件格式不正确",
url: "网址格式不正确",
date: "日期格式不正确",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符",
maxlength: $.validator.format("请输入一个 长度最多是 {0} 的字符"),
minlength: $.validator.format("请输入一个 长度最少是 {0} 的字符"),
rangelength: $.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为{0} 的值"),
min: $.validator.format("请输入一个最小为{0} 的值")
});
三、validate默认的验证规则中文解释
(1)required:true 必输字段
(2)remote:”check.php”使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
validate的默认验证规则是什么意思？
假如，一个表单元素的要求是必填，那么就在这个表单元素中加一个required 属性
如果这个元素没有填写内容，就会出现提示词
四. 自定义validate表单验证规则
addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数
以手机号码验证规则为例：
jQuery.validator.addMethod("mobile",function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) ||(mobile.test(value));
}
那么在表单元素中的属性设置为data-msg-mobile=“提示信息”
五. 详细代码，请看案例
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |