jquery Validation表单验证使用详解


Posted in Javascript onSeptember 12, 2020

是一款优秀的插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。本文就是通过讲解这个实例来理解Validation的应用。

jquery Validation表单验证使用详解

本实例涉及到的验证有:

用户名:长度、字符验证,重复性ajax验证(是否已存在)。

密码:长度验证,重复输入密码验证。

邮件:邮件地址验证。

固定电话:中国大陆固定电话号码验证。

手机号:中国大陆手机号码验证。

网址:网站URL地址验证。

日期:标准日期格式验证。

数字:整数、正整数验证,数字范围验证。

身份证:大陆身份证号码验证。

邮政编码:大陆邮政编码验证。

文件:文件类型(后缀)验证,如只允许上传图片。

IP:IP地址验证。

验证码:验证码ajax验证。

使用方法:

1、准备jquery和jquery.validate插件

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.validate.js"></script>

2、准备CSS样式

页面样式我不再详述,大家可以自己写个样式,也可以参看DEMO的页面源代码。这里要强调的关键样式是要显示验证信息的样式

label.error{color:#ea5200; margin-left:4px; padding:0px 20px; 
background:url(images/unchecked.gif) no-repeat 2px 0 } 
label.right{margin-left:4px; padding-left:20px; background: 
url(images/checked.gif) no-repeat 2px 0}

3、XHTML

<form id="myform" action="#" method="post"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> 
 <tr class="table_title"> 
 <td colspan="2">jquery.validation 表单验证</td> 
 </tr> 
 <tr> 
 <td width="22%" align="right">用户名:</td> 
 <td><input type="text" name="user" id="user" class="input required" /> 
 <p>用户名为3-16个字符,可以为数字、字母、下划线以及中文</p></td> 
 </tr> 
 <tr> 
 <td align="right">密码:</td> 
 <td><input type="password" name="pass" id="pass" class="input required" /> 
 <p>最小长度:6 最大长度:16</p> 
 </td> 
 </tr> 
 <tr> 
 <td align="right">确认密码:</td> 
 <td><input type="password" name="repass" class="input required" /></td> 
 </tr> 
</table> 
</form>

限于篇幅,本文的只截取了实例中HTML代码的一小部分,详细XHTML代码可参看页面DEMO源代码。值得一提的是,我在给了标签一个“required”类样式,下文将会提到它的作用。

4、应用Validation插件

调用Validation插件的方法:

$(function(){  
 var validate = $("#myform").validate({ 
   rules:{ //定义验证规则 
   ...... 
   }, 
   messages:{ //定义提示信息 
   ...... 
   } 
 }) 
});

rules:定义验证规则,key:value的形式,key是要验证的元素,value可以是字符串或对象。比如验证用户名的长度和不允许为空:

rules:{ 
 user:{ 
  required:true, 
  maxlength:16, 
  minlength:3 
 }, 
 ...... 
}

其实我们在XHTML代码中可以直接指定input的class属性为required,作用是不允许为空,这样在JS部分就不用重复写了。同样的验证email等,直接设置input的class属性为email。

messages:定义提示信息,key:value的形式key是要验证的元素,值是字符串或函数,当验证不通过时提示的信息。

messages:{ 
 user:{ 
  required:"用户名不能为空!", 
  remote:"该用户名已存在,请换个其他的用户名!" 
 }, 
 ...... 
}

本例中涉及的验证JS就是按照上面的规则进行编写的,Validation插件封装了好多基本的验证方式,如下:

required:true 必须有值,不能为空

remote:url 可以用于判断用户名等是否已经存在,服务器端输出true,表示验证通过

minlength:6 最小长度为6

maxlength:16 最大长度为16

rangelength:长度范围

range:[10,20] 数值范围在10-20之间

email:true 验证邮件

url:true 验证URL网址

dateISO:true 验证日期格式'yyyy-mm-dd'

digits:true 只能为数字

accept:'gif|jpg' 只接受gif或jpg为后缀的图片。常用于验证文件的扩展名

equalTo:'#pass' 与哪个表单字段的值相等,常用于验证重复输入密码

此外,我还根据项目实际情况扩展了几个验证,验证的代码在validate-ex.js,使用前需要先加载这个JS。它能提供以下验证:

userName:true 用户名只能包括中文字、英文字母、数字和下划线

isMobile:true 手机号码验证

isPhone:true 大陆手机号码验证

isZipCode:true 邮政编码验证

isIdCardNo:true 大陆身份证号码验证

ip:true IP地址验证

以上提供的验证方式基本上满足我们在大多数项目中的需求。如果其他特殊验证需求,可以扩展,方法如:

jQuery.validator.addMethod("isZipCode", function(value, element) {  
 var zip = /^[0-9]{6}$/;  
 return this.optional(element) || (zip.test(value));  
}, "请正确填写您的邮政编码!");

疑难问题解决

1、在项目中遇到在验证用户名是否存在时,发现不支持中文输入验证。我的解决办法是给用户名进行encodeURIComponent编码,后台PHP再对接受的值进行urldecode解码

user:{ 
 remote: { 
   url: "chk_user.php", //服务端验证程序 
   type: "post", //提交方式 
   data: { user: function() { 
    return encodeURIComponent($("#user").val()); //编码数据 
   }} 
 } 
},

服务端验证程序chk_user.php的代码:

<?php 
$request = urldecode(trim($_POST['user'])); 
usleep(150000); 
$users = array('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan'); 
$valid = 'true'; 
foreach($users as $user) { 
 if( strtolower($user) == $request ) 
  $valid = 'false'; 
} 
echo $valid; 
?>

我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。

2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。

jquery Validation表单验证使用详解

解决办法是在validate({})追加以下代码:

errorPlacement: function(error, element) { 
 if ( element.is(":radio") ) 
  error.appendTo ( element.parent() ); 
 else if ( element.is(":checkbox") ) 
  error.appendTo ( element.parent() ); 
 else if ( element.is("input[name=captcha]") ) 
  error.appendTo ( element.parent() ); 
 else 
  error.insertAfter(element); 
}

3、重置表单。Form表单原始的重置方法是reset自带

<input type="reset" value="重 置" /> 

点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()

$("input:reset").click(function(){ 
 validate.resetForm(); 
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
JavaScript 继承使用分析
May 12 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 #Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 #Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 #Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
You might like
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php修改时间格式的代码
2011/05/29 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php查询whois信息的方法
2015/06/08 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python中遍历文件的3个方法
2014/09/02 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
院药学专业个人求职信
2013/09/21 职场文书
后勤自我鉴定
2013/10/13 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
怎样写演讲稿
2014/01/04 职场文书
六查六看心得体会
2014/10/14 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
公司禁烟通知
2015/04/23 职场文书
卡特教练观后感
2015/06/08 职场文书