为什么要用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

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表单验证大全》 ,欢迎大家学习阅读。

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

jquery.validate表单验证插件使用方法解析的更多相关文章

  1. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

  2. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. wordpress添加Html5的表单验证required方法小结

    这篇文章主要介绍了wordpress添加Html5的表单验证required方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5表单验证特性(知识点小结)

    这篇文章主要介绍了HTML5表单验证特性的一些知识点,本文通过实例代码截图的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  6. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  7. android – 有没有办法阻止Mobile Safari在HTML表单的数字字段中插入逗号?

    我有一个网站,其中包含一个表单,允许用户输入信用卡详细信息.卡号,发行号,CVC号和他们希望存入的金额的字段使用HTML形式的输入框,类型为“数字”.iOS5附带的更新的MobileSafari会自动在“数字”输入字段中将逗号插入数字中.这不仅在CC编号中看起来很愚蠢,而且会破坏我的验证.有办法阻止这个吗?

  8. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  9. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  10. 设置焦点到输入框和显示Android键盘使用jquery手机在pageshow

    我正在设置焦点到输入框,并显示Android键盘使用jquery手机网页显示.我从Web上尝试过很多选项.但是没有一个在模拟器和移动设备中都能按预期工作.这是代码:查找屏幕截图以供参考请咨询…解决方法对我有用的解决方案

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部