jquery.validate表单验证插件使用方法解析


Posted in Javascript onNovember 07, 2016

为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下

使用方式

1、在控件中使用默认验证规则,例子:
电子邮件(必填)
<input id="email" class="required email" value="email@" />

2、可以在控件中自定义验证规则,例子:
自定义(必填,[3,5])

<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" />

3、通过javascript自定义验证规则,下面的JS自定义了两个规则,password和confirm_password

$().ready(function() {
 $("#form2").validate({
 rules: {
  password: {
  required: true,
  minlength: 5
  },
  confirm_password: {
  required: true,
  minlength: 5,
  equalTo: "#password"
  }
 },
 messages: {
  password: {
  required: "没有填写密码",
  minlength: jQuery.format("密码不能小于{0}个字符")
  },
  confirm_password: {
  required: "没有确认密码",
  minlength: "确认密码不能小于{0}个字符",
  equalTo: "两次输入密码不一致嘛"
  }
 }
 });
});

required除了设置为true/false之外,还可以使用表达式或者函数,比如

$("#form2").validate({
 rules: {
 funcvalidate: {
 required: function() {return $("#password").val()!=""; }
 }
 },
 messages: {
 funcvalidate: {
 required: "有密码的情况下必填"
 }
 }
});

Html

密码<input id="password" name="password" type="password" />
确认密码<input id="confirm_password" name="confirm_password" type="password" />
条件验证<input id="funcvalidate" name="funcvalidate" value="" />

4、使用meta自定义验证信息

首先用JS设置meta

$("#form3").validate({ meta: "validate" });           

Html

email<input class="{validate:{required:true, email:true, 
messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}}"/>

5、使用meta可以将验证规则写在自定义的标签内,比如validate

JS设置meta

$().ready(function() {
 $.metadata.setType("attr", "validate");
 $("#form1").validate();
});

Html

Email

<input id="email" name="email" validate="{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}" />

6、自定义验证规则

对于复杂的验证,可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式,比如lettersonly,ziprange,nowhitespace等

例子

// 字符验证 
jQuery.validator.addMethod("userName", function(value, element) {
 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "用户名只能包括中文字、英文字母、数字和下划线"); 

//然后就可以使用这个规则了
$("#form1").validate({
 // 验证规则
 rules: {
 userName: {
  required: true,
  userName: true,
  rangelength: [5,10]
 }
 },
 /* 设置错误信息 */
 messages: {
 userName: {
  required: "请填写用户名",
  rangelength: "用户名必须在5-10个字符之间" 
 }  
 },
});

7、radio、checkbox、select的验证方式类似

radio的验证

性别
<span>
 男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
 女<input type="radio" id="gender_female" value="f" name="gender" />
</span>

checkbox的验证

最少选择两项

<span>
 选项1<input type="checkbox" id="check_1" value="1" name="checkGroup" 
 class="{required:true,minlength:2, messages:{required:'必须选择',minlength:'至少选择2项'}}" /><br />
 选项2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
 选项3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>

select的验证

下拉框

<span>
 <select id="selectbox" name="selectbox" class="{required:true}">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 </select>
</span>

8、Ajax验证

用remote可以进行Ajax验证

remote: {
url: "url", //url地址
type: "post",  //发送方式
dataType: "json", //数据格式 data: {   //要传递的数据
 username: function() {
 return $("#username").val();
 }}
}

验证用户多种信息: 

<script type="text/javascript"></script>
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
 var length = value.length;
 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
 return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误"); 

// 电话号码验证 
jQuery.validator.addMethod("phone", function(value, element) {
 var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
 return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");

// 邮政编码验证 
jQuery.validator.addMethod("zipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");

// QQ号码验证 
jQuery.validator.addMethod("qq", function(value, element) {
 var tel = /^[1-9]\d{4,9}$/;
 return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");

// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
 var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
 return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");

// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
 var chrnum = /^([a-zA-Z0-9]+)$/;
 return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
 var chinese = /^[\u4e00-\u9fa5]+$/;
 return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
 return value == "请选择";
}, "必须选择一项");

// 字节长度验证
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for (var i = 0; i < value.length; i++) {
 if (value.charCodeAt(i) > 127) {
  length++;
 }
 }
 return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

参考学习:功能强大的jquery.validate表单验证插件

本文已被整理到了《jquery表单验证大全》 ,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
JS 实现Base64编码与解码实例详解
Nov 07 #Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 #Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 #Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
You might like
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python读写二进制文件的方法
2015/05/09 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python移位运算的实现
2019/07/15 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
高一生物教学反思
2014/01/17 职场文书
企业诚信承诺书
2014/05/23 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
使用python求解迷宫问题的三种实现方法
2022/03/17 Python