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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
常用的js方法合集
2017/03/10 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
简单介绍python封装的基本知识
2019/08/10 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
个人现实表现材料
2014/02/04 职场文书
一月红领巾广播稿
2014/02/11 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
购房个人委托书范本
2014/10/11 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书