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中的一些定位属性[图解]
Jul 14 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
详解JS面向对象编程
Jan 24 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
js实现滑动滑块验证登录
Jul 24 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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
axios基本入门用法教程
2017/03/25 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python实现处理mysql结果输出方式
2020/04/09 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
武汉高蓝德国际.net机试
2016/06/24 面试题
Linux上比较文件的命令都有哪些
2012/02/24 面试题
《放小鸟》教学反思
2014/04/20 职场文书
法人代表证明书
2014/09/18 职场文书
小学安全工作总结2015
2015/05/18 职场文书
圆明园观后感
2015/06/03 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL