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 模拟用户单击事件
Dec 31 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
动态加载jquery库的方法
Feb 12 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
vuex 使用文档小结篇
Jan 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
javascript 闭包详解
2015/02/15 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
js判断密码强度的方法
2020/03/18 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python数据类型详解(二)列表
2016/05/08 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python yield与实现方法代码分析
2018/02/06 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python 美化输出信息的实例
2018/10/15 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
介绍一下EJB的体系结构
2012/08/01 面试题
党校自我鉴定范文
2013/10/02 职场文书
工厂厂长的职责
2013/12/12 职场文书
教师业务培训方案
2014/05/01 职场文书
工地安全生产标语
2014/06/06 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL