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对象创建及继承原理实例解剖
Feb 28 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
浅谈vue父子组件怎么传值
Jul 21 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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中常用的输出函数总结
2014/09/22 PHP
php图像处理类实例
2015/07/28 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
jQuery的一些注意
2006/12/06 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python sys.argv[]用法实例详解
2018/05/25 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
英文自荐信格式
2013/11/28 职场文书
机关搬迁方案
2014/05/18 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python合并pdf文件的工具
2021/07/01 Python
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang