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 相关文章推荐
使用jquery解析XML的方法
Sep 05 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
vue配置接口域名方法总结
May 12 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Python字符串中查找子串小技巧
2015/04/10 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
浅谈对yield的初步理解
2017/05/29 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
使用Python pip怎么升级pip
2020/08/11 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
单位介绍信范文
2014/01/18 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
梅花魂教学反思
2014/04/25 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
高中团支书竞选稿
2015/11/21 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书