jQuery validate验证插件使用详解
Validate验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。
Description
浏览器支持:IE7+ 、Chrome、Firefox、Safari、Mobile Browser
jQuery版本:1.7.0+
Usage
载入jQuery、validate
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>
DOM标签验证规则填写
<div class="form_control"> <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确"> </div> <div class="form_control"> <select class="required" data-valid="isNonEmpty" data-error="省份必填"> <option value="">请选择省份</option> <option value="001">001</option> <option value="002">002</option> </select> </div>
给需要验证的表单元素的class填入required(不建议在这个class上做其他样式)。
建议input用独立div包裹,因为验证的message是从当前input的父元素上append生成。
data-tip:在尚未验证而获取焦点时出现的提示。
data-valid:验证规则,若有组合验证,以||符号分割。
data-error:验证错误提示,对应data-valid,以||符号分割。
单选/复选比较特殊,需要添加元素包裹单选/复选集合,并在包裹元素上加验证规则。
<div class="form_control"> <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio"> <label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label> <label><input type="radio" name="sex">未知</label> </span> </div> <div class="form_control"> <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox"> <label><input type="checkbox" name="label">红</label> <label><input type="checkbox" name="label">绿</label> <label><input type="checkbox" name="label">蓝</label> </span> </div>
JS调用
//**注意:必须以表单元素调用validate** $('form').validate({ type:{ isChecked: function(value, errorMsg, el) { var i = 0; var $collection = $(el).find('input:checked'); if (!$collection.length) { return errorMsg; } } }, onFocus: function() { this.parent().addClass('active'); return false; }, onBlur: function() { var $parent = this.parent(); var _status = parseInt(this.attr('data-status')); $parent.removeClass('active'); if (!_status) { $parent.addClass('error'); } return false; } });
表单提交前的验证
$('form').on('submit', function(event) { event.preventDefault(); $(this).validate('submitValidate'); //return true or false; });
validate内置验证规则
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
例子:
验证用户名,密码,确认密码,主页,生日,邮箱等
首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且为表单定义一个id,为需要验证的控件定义name属性,并赋值,此插件使用的是控件的name属性,而非id。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery邮箱验证.aspx.cs" Inherits="练习.jquery邮箱验证" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #aa{ color:Red;} </style> <script src="Jquery1.7.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <script src="messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#form1').validate({ rules: { username: { required: true, minlength: 6, maxlength: 12 }, password: { required: true, minlength: 6 }, passwordok:{required: true, equalTo: "#password"}, index: { required: true, url: true }, birthday: { required: true, dateISO: true }, bloodpress:{required: true,digits:true}, email: { required: true, email: true } }, errorshow: function (error, element) { error.appendTo(element.siblings('span')); } }) }) </script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr><td>用户名:</td><td> <input name="username" type="text" /><span id="aa">*</span></td></tr> <tr><td>密码:</td><td> <input id="password" name="password" type="text" /><span id="aa">*</span></td></tr> <tr><td>确认密码:</td><td> <input id="repassword" name="passwordok" type="text" /><span id="aa">*</span></td></tr> <tr><td>主页:</td><td> <input name="index" type="text" /><span id="aa">*</span></td></tr> <tr><td>生日:</td><td> <input name="birthday" type="text" /><span id="aa">*</span></td></tr> <tr><td>血压:</td><td> <input name="bloodpress" type="text" /><span id="aa">*</span></td></tr> <tr><td>邮箱:</td><td><input name="email" type="text" /><span id="aa">*</span></td></tr> <tr><td></td><td> <input id="Button1" type="button" value="button" /></td></tr> </table> </div> </form> </body> </html>
实现如下效果:
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:2016-07-07jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
jQuery解决IE 6/7/8 BUG:下拉框select设宽度时option超出显示不全,经过修改效果还不错,遇到类似情况的朋友可以参考下哈2013-05-05jquery和javascript中如何将一元素的内容赋给另一元素
将一元素的内容赋给另一元素,在某些情况下还是比较实用的,下面为大家讲解下jquery和javascript中是如何实现的2014-01-01
最新评论