JQuery 表单校验插件 validate 使用纪录
2014-04-29 20:24
633 查看
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验。
基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个。
官网地址 : http://jqueryvalidation.org/
官网文档:http://jqueryvalidation.org/documentation/
下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考:
http://jquery.bassistance.de/validate/demo/index.html
本文要介绍validate插件使用方法, 与特殊功能
相比方法1,方法2代码更加集中,逻辑清晰,方便维护。且方法一种 属性 required与HTML5冲突了, 放在class中会污染class的纯净性。
方法1,添加required属性,
或者 添加 required 到class中
然后找到form DOM调用validate接口,完成表单规则设置动作:
方法2, 直接使用validate接口设置规则:
validate 提供 errorPlacement 接口, 可以定制错误提示的样式和位置。 http://jqueryvalidation.org/?s
本文给出, 将错误提示语放在报错控件下方, 并添加错误提示边框和背景色的方法:
新增validate扩展JS文件 formValidateExt.js:
新增validate扩展css文件 formValidateExt.css:
HTML示例文件:
validate插件提供了 remote规则, 可以实现远程校验:例如上例中phoneNum添加的规则, “checkSame.php”是后台的校验文件路径:
下面给出 此文件后台实现, true表示校验通过, false表示不通过:
注释: 上例中, 还有一个省市联动的JQuery插件(
可以完成表单中选择省份和城市的功能, 见 http://www.helloweba.com/view-blog-188.html
基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个。
官网地址 : http://jqueryvalidation.org/
官网文档:http://jqueryvalidation.org/documentation/
下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考:
http://jquery.bassistance.de/validate/demo/index.html
本文要介绍validate插件使用方法, 与特殊功能
校验规则设置
以 required规则为例子说明,有以下两个方法, 属性|class+valdate接口 或者 validate 接口设置规则参数。相比方法1,方法2代码更加集中,逻辑清晰,方便维护。且方法一种 属性 required与HTML5冲突了, 放在class中会污染class的纯净性。
方法1,添加required属性,
<p> <label for="ccomment">Your comment (required)</label> <textarea id="ccomment" name="comment" required></textarea> </p>
或者 添加 required 到class中
<p> <label for="ccomment">Your comment (required)</label> <textarea id="ccomment" name="comment"class=“required”></textarea> </p>
然后找到form DOM调用validate接口,完成表单规则设置动作:
$("#commentForm").validate();
方法2, 直接使用validate接口设置规则:
$(".selector").validate({ rules: { // simple rule, converted to {required:true} name: "required", // compound rule email: { required: true, email: true } } });
错误提示区域的样式自定义
插件默认提供的错误提示是, 在校验控件的右侧给予一个 红色字符串 显示, 如果希望给错误提示语, 换个位置和添加样式, 就需要使用插件提供的接口了。validate 提供 errorPlacement 接口, 可以定制错误提示的样式和位置。 http://jqueryvalidation.org/?s
本文给出, 将错误提示语放在报错控件下方, 并添加错误提示边框和背景色的方法:
新增validate扩展JS文件 formValidateExt.js:
$.validator.setDefaults({ errorPlacement: function (error, element) { /* 生成显示错误提示HTML DOM */ var tipHTML = "<div class=\"errorLabelWraper\"></div>"; var tipObj = $(tipHTML); error.appendTo(tipObj); tipObj.insertAfter(element); var offset = element.offset(); var top = offset.top + element.height(); var left = offset.left; console.log("top="+top) console.log("height="+element.height()) console.log("left="+left) tipObj.css("top", top); tipObj.css("left", left); } }); //手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9])|(15[0-9])|(18[0-9])|(170))\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); //电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码");
新增validate扩展css文件 formValidateExt.css:
div.errorLabelWraper{ position: absolute; display:inline-block; padding-left: 5px; line-height: 30px; border:2px solid #A9A9A9; background-color: #FEFEFE; border-radius:5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } label.error{ color: #FF0000; }
HTML示例文件:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script> <script type="text/javascript" src="../formValidateExt.js"></script> <script type="text/javascript" src="../jquery.cityselect.js"></script> <link rel="stylesheet" type="text/css" href="../formValidateExt.css" /> </head> <body> <form id="form1" method="post" action=""> <fieldset> <legend>Gender</legend> <label for="gender_male"> <input type="radio" id="gender_male" value="m" name="genderRadio"> Male </label> <label for="gender_female"> <input type="radio" id="gender_female" value="f" name="genderRadio"> Female </label> </fieldset> <fieldset> <legend>Spam</legend> <label for="spam_email"> <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spamCheckbox"> Spam via E-Mail </label> <label for="spam_phone"> <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spamCheckbox"> Spam via Phone </label> <label for="spam_mail"> <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spamCheckbox"> Spam via Mail </label> </fieldset> <p> <label for="jungleSelect">Please select a jungleSelect noun</label><br> <select id="jungleSelect" name="jungleSelect"> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option> </select> </p> <p> <label for="phoneNum">phoneNum</label> <input id="phoneNum" name="phoneNum" type="text" /> <p> <div id="city"> address <select class="prov" name="prov" ></select> <select class="city" name="city"></select> <!-- <select class="dist" disabled="disabled"></select> --> </div> <p> <input id="submit" class="submit" type="submit" value="Submit"> </p> </form> <script type='text/javascript'> $(document).ready(function() { $("#city").citySelect(); $("#form1").validate({ groups: { address: "prov city" }, rules: { genderRadio: { required: true, }, spamCheckbox: { required: true, }, jungleSelect: { required: true, }, prov: { required: true, }, city: { required: true, }, phoneNum: { required: true, isMobile: true, remote: "checkSame.php" } }, messages: { phoneNum: { remote: $.validator.format("{0} 已经注册过。") } } }); }); </script> </body> </html>
服务器端校验
对于一些校验,不能够在浏览器端实现的, 例如手机号重复,姓名重复等, 需要后台检索数据库给结果的情况,validate插件提供了 remote规则, 可以实现远程校验:例如上例中phoneNum添加的规则, “checkSame.php”是后台的校验文件路径:
remote: "checkSame.php"
下面给出 此文件后台实现, true表示校验通过, false表示不通过:
<?php if($_GET) { $phoneNum = $_GET['phoneNum']; if($phoneNum == '123456') { echo 'false'; } else { echo 'true'; } exit(); } ?>
注释: 上例中, 还有一个省市联动的JQuery插件(
js/jquery.cityselect.js),
可以完成表单中选择省份和城市的功能, 见 http://www.helloweba.com/view-blog-188.html
相关文章推荐
- 使用JQuery.Validate插件来校验页面表单有效性
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- jquery表单验证插件jquery.validate的使用
- jQuery的表单校验插件validate
- jQuery Validate表单验证插件 添加class属性形式的校验
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- jQuery Validate表单验证插件的基本使用方法及功能拓展
- 使用jquery.validate.js插件进行表单里控件的验证
- 表单实时校验插件——jquery.validateForm.js(v.2.0)
- jquery表单验证插件(jquery.validate.js)的3种使用方式
- jQuery的表单校验插件validate(转)
- jquery validate表单验证插件的基本使用方法及功能拓展
- 使用jQuery validate插件验证表单
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- 基于jquery的表单校验插件 - formvalidator使用体验
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- jquery validate插件前端表单验证插件的使用
- 使用 jquery.validate.messages_cn.js 插件实现表单自动验证,出现中文乱码
- jQuery Validate 表单验证插件使用方法
- jQuery form插件的使用--使用 fieldValue 方法校验表单