jQuery验证验证插件使用详解

生效验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML，CSS与射流研究…之间的低耦合能让您自由布局和丰富样式，支持输入、选择、文本区域的验证。

描述

浏览器支持：IE7、Chrome、火狐、Safari、手机浏览器

框架版本：1.7.0

使用载入jQuery、验证

脚本类型=' text/JAVAScript ' src=' http : jquery-1。11 .1 .js '/脚本脚本类型=' text/JAVAScript ' src=' http : jquery-validate。js '/脚本

数字正射影像图标签验证规则填写

div class=' form _ control ' input class=' required ' value='[email protected]' type=' text ' name=' email ' data-tip='请输入您的邮箱数据-有效='isNonEmpty||isEmail '数据-错误='电子邮件不能为空||邮箱格式不正确/div class=' form _ control ' select class=' required ' data-valid=' isNonEmpty ' data-error='省份必填选项值=' '请选择省份/option选项值=' 001 ' 001/选项选项值=' 002 ' 002/选项/选择/div给需要验证的表单元素的班级填入必需的（不建议在这个班级上做其他样式)。建议投入用独立差异包裹，因为验证的消息是从当前投入的父元素上附加生成数据提示：在尚未验证而获取焦点时出现的提示数据有效：验证规则，若有组合验证，以||符号分割数据错误：验证错误提示，对应数据有效，以||符号分割。单选/复选比较特殊，需要添加元素包裹单选/复选集合，并在包裹元素上加验证规则。

div class=' form _ control ' span class=' required ' data-valid=' isChecked ' data-error='性别必选data-type=' radio ' labelinput type=' radio ' name=' sex '男/label标签输入类型=' radio '名称=' sex '女/label标签输入类型=' radio '名称=' sex '未知/label/span/div class=' form _ control ' span class=' required '数据-有效=' isChecked '数据-错误='标签至少选择一项数据类型='复选框'标签输入类型='复选框'名称='标签'红/label标签输入类型=' checkbox '名称=' label '绿/label标签输入类型=' checkbox '名称=' label '蓝/label /span/divJS调用

//**注意：必须以表单元素调用验证** $("表单")。验证({ type : { ischeck d : }函数(值，errorMsg，El){ var I=0；var $collection=$(el).find('输入3360已选中')；if(！$收藏。长度){返回错误消息；} } }，onFocus:函数(){ this.parent().添加CLaSS(' active ')；返回false}，onBlur:函数(){ var $ parent=this。parent()；var _ status=ParSeint(这。attr('数据-状态')；$家长。移除类(“活动的”)；if(！_status) { $parent.addClass('错误');}返回false } })；

表单提交前的验证

$(“表单”).on('submit '，function(event){ event。prevent default()；$(这个)。验证("提交验证");//返回真或假；});生效内置验证规则

需要：道必输字段远程：”检查。PHP "使用创建交互式、快速动态网页应用的网页开发技术方法调用check.php验证输入值电子邮件：路径必须输入正确格式的电子邮件url:true路径路径必须输入正确格式的网址日期：真实必须输入正确格式的日期日期：过去必须输入正确格式的日期（国际标准化组织),例如：2009-06-23,1998/01/22 只验证格式，不验证有效性数字：街必须输入合法的数字（负数，小数)digits:true必须输入整数信用卡：必须输入合法的信用卡号等于：'#field '输入值必须和#字段相同接受：输入拥有合法后缀名的字符串（上传文件的后缀)maxlength:5输入长度最多是5的字符串（汉字算一个字符)minlength:10输入长度最小是10的字符串（汉字算一个字符)范围长度：[5,10]输入长度必须介于5和10 之间的字符串')(汉字算一个字符)范围：[5,10]输入值必须介于5和10 之间max:5输入值不能大于5分钟：10输入值不能小于10

例子：验证用户名，密码，确认密码，主页，生日，邮箱等首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且为表单定义一个id，为需要验证的控件定义名字属性，并赋值，此插件使用的是控件的名字属性，而非身份证。

"%@"页面语言="c#"AutoEventWireup="true "代码隐藏="jquery "邮箱验证。aspx。cs"Inherits="练习。框架邮箱验证' %!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title style type=' text/CSS ' # aa { color : red；}/style脚本src=' http : jquery 1。7 .js ' type=' text/JavaScript '/script script src=' http : jquery。验证。js ' type=' text/JavaScript '/script script src=' http : messages _ cn。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # form 1 ')).验证({规则s : {用户名： {必需d : true，minlength: 6，maxlength: 12 }，密码： {必需d : true，minlength: 6 }，passwordok : {必需d : true，equalTo: '#password'}，索引333: {必需d 3: true，url: })})))/脚本/头体表单id=' form 1 ' runat=' server ' div表trtd用户名：/tdtd输入名称='用户名'类型=' text '/span id=' aa ' */span/TD/tr trtd密码：/tdtd输入id=' password ' name=' password ' type=' text '/span id=' aa ' */span/TD/tr trtd确认密码：/tdtd输入id=' repassword ' name=' passwordok ' type=' text '/span id=' aa ' */span/TD/tr trtd主页：/tdtd输入名称='索引'类型=' text '/span id=' aa ' */span/TD/tr trtd生日：/tdtd输入名称='生日'类型=' text '/span id=' aa ' */span/TD/tr trtd血压：/tdtd输入名称=' block press ' type=' text '/span id=' aa ' */span/TD/tr trtd邮箱：/TDT输入名称=' email '类型=' text '/span id=' aa ' */span/TD/tr trtd/tdtd输入id=' button 1 '类型=' button '值=' button '/TD/tr/table/div/form/body/html实现如下效果：

以上就是本文的全部内容，希望对大家的学习有所帮助。