表单验证插件Validation应用的实例讲解


Posted in Javascript onOctober 10, 2015

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用。

表单验证插件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>

值得一提的是,我在给了标签一个“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('月光光', 'jeymii', 'Peter', 'helloweba'); 
$valid = 'true'; 
foreach($users as $user) { 
  if( strtolower($user) == $request ) 
    $valid = 'false'; 
} 
echo $valid; 
?>

我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。
2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。

表单验证插件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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 Javascript
JS实现的车标图片提示效果代码
Oct 10 #Javascript
jqTransform美化表单
Oct 10 #Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 #Javascript
js中unicode转码方法详解
Oct 09 #Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 #Javascript
You might like
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
js 省地市级联选择
2010/02/07 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python障碍式期权定价公式
2019/07/19 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
struct和class的区别
2015/11/20 面试题
电大毕业生自我鉴定
2014/04/10 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书