Validate表单验证深入学习,jQuery验证插件validate使用方法详解

也做了验证的功能,这些都要在用户提交之前进行验证才行,Validate表单验证入门学习》,今天这篇文章深入学习jQuery

1. 写在前面

之前一篇文章介绍了jQuery
Validate表单验证入门的基础知识,详细内容参见《jQuery
Validate表单验证入门学习》
今天这篇文章深入学习jQuery
Validate表单验证,以下就是文章的全部内容:

  我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改。
  记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单。流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页面做回显,把错误信息也显示出来,但是比较繁琐。
  前面做网上商城项目的时候,用EasyUI做后台商品添加时,也做了验证的功能,EasyUI自带了验证的功能,还是很强大的,效果也不错。感兴趣的话不妨来看一下这篇文章。
  但是前台用户注册的页面我们该如何做呢?这就是本文所要介绍的主要内容了,我们可以使用jQuery的Validate插件来做注册的验证功能,jQuery我也没有系统的学习,只是用到什么学什么,用到什么了解什么,所以如有错误之处,欢迎留言指正~下面我一步步通过代码详细介绍一下jQuery-Validate验证插件的使用步骤。

1、用其他方式替代默认的 SUBMIT

2. 效果展示

$().ready(function() {
 $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
});

  首先来看一下最后实现的效果,先有个直观的感受,个人感觉还算可以的~能接受。

使用 ajax 方式

图片 1

 $(".selector").validate({  
 submitHandler: function(form) 
 {  
  $(form).ajaxSubmit();  
 } 
 }) 

  从图中可以看出,包括输入前的提示,输入正确和错误的提示的功能,都已经完成。再看一下我的工程:

可以设置 validate 的默认值,写法如下:

图片 2

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

  总共有6个jsp文件,之所以写成6个是为了一步步解说做这个效果的步骤,最后terminal.jsp是最终版的。运行的时候也只需要运行这个terminal.jsp即可。
下面我详细分析一下使用jQurey-Validate验证插件的过程。

如果想提交表单, 需要使用 form.submit(),而不要使用 $(form).submit()。
2、debug,只验证不提交表单 如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。

3. Validate环境的搭建

$().ready(function() {
 $("#signupForm").validate({
  debug:true
 });
});

 
 环境搭建,肯定少不了jar包,我使用的是jQuery-validate-1.15,官方上给出了依赖的几个版本的jQuery,我下了jQuery-1.11.1。所以将这两个js文件放到工程中WebRoot/js中,并在jsp页面中导入即可。

如果一个页面中有多个表单都想设置成为 debug,则使用:

图片 3

$.validator.setDefaults({
 debug: true
})

  
demo1.jsp很简单,为了搭建环境而已,如果点击提交,不会跳转到指定页面表示环境搭建成功。

3、ignore:忽略某些元素不验证
**
ignore: “.ignore”
**4、更改错误信息显示的位置
errorPlacement:Callback 指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

4. Validate基本方法的使用

errorPlacement: function(error, element) { 
 error.appendTo(element.parent()); 
}

     
好了,环境搭建成功了,接下来我们开始使用Validate的基本方法了,这里还要导入一个js文件:additional-methods.js,新版本的jQuery-validate-1.15中没有对文件后缀的验证,后来我在官网上查了一下,官网上说放到additional-methods.js中了,所以我去下了个,放到工程中了,而且方法名也和老版本不太一样,下面再说。看一下demo2.jsp:
<%@ page language=”java” import=”java.util.*”
pageEncoding=”UTF-8″%>

实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[6,12]
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  slike:{
  required:true,
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- 
 <ul>
 <li>演示基本方法的使用</li>
 <li>jquery.validate.js中260行有缺省的验证配置</li>
 <li>jquery.validate.js中354行有验证方法出错的消息,即告诉我们都有哪些验证方法</li>
 </ul>
 -->
 <form id="ff" action="http://www.hao123.com" method="post">
 姓名:<input type="text" name="sname" /><br/>
 密码:<input type="password" name="spass" id="spass"/><br/>
 确认密码:<input type="password" name="spass2" /><br/>
 爱好:
 上网:<input type="checkbox" name="slike" value="上网"/>
 唱歌:<input type="checkbox" name="slike" value="唱歌"/>
 编程:<input type="checkbox" name="slike" value="编程"/>
 书法:<input type="checkbox" name="slike" value="书法"/><br/>
 邮箱:<input type="text" name="semail" /><br/>
 头像:<input type="file" name="simage" /><br/>
 <input type="submit" value="提交">
 </form>
 </body>
</html>
<tr>
 <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
 <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
 <td class="status"></td>
</tr>
<tr>
 <td style="padding-right: 5px;">
  <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
  <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
 </td>
 <td style="padding-left: 5px;">
  <input id="dateformat_am" name="dateformat" type="radio" value="1" />
  <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
 </td>
 <td></td>
</tr>
<tr>
 <td class="label"> </td>
 <td class="field" colspan="2">
  <div id="termswrap">
   <input id="terms" type="checkbox" name="terms" />
   <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
  </div>
 </td>
</tr>

errorPlacement: function(error, element) {
 if ( element.is(":radio") )
  error.appendTo( element.parent().next().next() );
 else if ( element.is(":checkbox") )
  error.appendTo ( element.next() );
 else
  error.appendTo( element.parent().next() );
}

  demo2中,我们写了一些基本的表单了,并且在js中对其进行了验证,validate中定义了一些缺省的验证,required表示必填字段,rangelength表示长度范围,用数组表示范围边界,equalTo后面跟一个id,表示跟后面跟的id的元素内容相同,这里说一下extension,表示后缀,以前版本叫accept,新版本中改为extension了,网上的搜索的关于后缀的验证都是accept,新版没了,而且extension就是在新加的additional-methods.js中。我们看一下这个版本的效果:

代码的作用是:一般情况下把错误信息显示在
<td class=”status”></td> 中,如果是 radio 则显示在
<td></td> 中,如果是 checkbox 则显示在内容的后面。
参数 类型 描述 默认值
errorClass String 指定错误提示的 css
类名,可以自定义错误提示的样式。 “error”
errorElement String 用什么标签标记错误,默认是 label,可以改成
em。 “label”
errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: “#messageBox1, #messageBox2” 
errorLabelContainer Selector 把错误信息统一放在一个容器里面。 
wrapper String 用什么标签再把上边的 errorELement 包起来。 
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。
errorContainer: “div.error”,
errorLabelContainer: $(“#signupForm div.error”),
wrapper: “li”
5、更改错误信息显示的样式 设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个
validation.css,专门用于维护校验文件的样式。

图片 4

input.error { border: 1px solid red; }
label.error {
 background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

 padding-left: 16px;

 padding-bottom: 2px;

 font-weight: bold;

 color: #EA5200;
}
label.checked {
 background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

  有点丑……因为还没做css,
但是我直接点击提交,会出现一些验证信息了,这些都是默认的信息,是源码中提供的,说明一点,验证功能生效了,我们下面就改写一下后面显示的信息,这些默认的显然不太友好。

6、每个字段验证通过执行函数 success:String,Callback
要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css
类,也可跟一个函数。

5. 实现错误消息的本地化

success: function(label) {
 // set   as text for IE
 label.html(" ").addClass("checked");
 //label.addClass("valid").text("Ok!")
}

   我们可以指定messages消息的显示内容,也是json格式的,如下:
<%@ page language=”java”
import=”java.util.*” pageEncoding=”UTF-8″%>

添加 “valid” 到验证元素,在 CSS 中定义的样式 <style>label.valid
{}</style>。
success: “valid”
7、验证的触发方式修改 下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加。
触发方式 类型 描述 默认值
onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true
onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮)。 true
onkeyup Boolean 在 keyup 时验证。 true
onclick Boolean 在点击复选框和单选按钮时验证。 true
focusInvalid Boolean 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 true
focusCleanup Boolean 如果是 true
那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid
一起用。 false

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="jquery-1.11.1.js"></script>
 <script type="text/javascript" src="jquery.validate.js"></script>
 <script type="text/javascript" src="additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[6,12]
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  saddress:{
  required:true
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 },
 messages:{
  sname:{
  required:"请输入用户名",
  rangelength:$.validator.format("用户名长度在必须为:{0}-{1}之间")
  },
  spass:{
  required:"请输入密码",
  rangelength:$.validator.format("字段长度必须为:{0}-{1}之间")
  },
  spass2:{
  required:"请再次输入密码",
  equalTo:"两次密码必须一致" //表示和id="spass"的值相同
  },
  saddress:{
  required:"请选择地址"
  },
  semail:{
  required:"请填写邮件",
  email:"邮箱格式不正确"
  },
  simage:{
  required:"请选择要上传的头像",
  extension:"文件后缀名必须为jpg,jpeg,gif,png"
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- body中的内容不变,省略不写了 -->
 </body>
</html>
// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
  submitHandler:function(form){
   alert("submitted"); 
   form.submit();
  } 
 });
 $("#reset").click(function() {
  validator.resetForm();
 });

});

  相当于覆写了原来默认的消息提示,来看下效果:

8、异步验证 remote:URL
使用 ajax
方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用
data 选项。

图片 5

remote: "check-email.php"
remote: {
 url: "check-email.php",  //后台处理程序
 type: "post",    //数据发送方式
 dataType: "json",   //接受数据格式 
 data: {      //要传递的数据
  username: function() {
   return $("#username").val();
  }
 }
}

  这就有点感觉了。继续往下完善。

远程地址只能输出 “true” 或 “false”,不能有其他输出。
9、添加自定义校验 addMethod:name, method, message
自定义验证方法

6. 实现远程验证

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for(var i = 0; i < value.length; i++){
  if(value.charCodeAt(i) > 127){
   length++;
  }
 }
 return this.optional(element) || ( length >= param[0] && length <= param[1] ); 
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证 
jQuery.validator.addMethod("isZipCode", function(value, element) { 
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

     
所谓远程验证,指的是当用户注册时输入用户名时,系统得从数据库中查询是否已经有该用户名了,如果有则告诉用户已经有人注册过了该名字了,但是我们不用去查数据库,我们写个Action模拟下即可,主要是实现validate插件和Action之间的通信。看demo4.jsp:

注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js
文件中添加。建议一般写在 additional-methods.js 文件中。
注意:在 messages_cn.js 文件中添加:isZipCode:
“只能包括中文字、英文字母、数字和下划线”。调用前要添加对
additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证 radio 的 required 表示必须选中一个。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 <script type="text/javascript">
 $(function(){
 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 onkeyup:null, //当丢失焦点时才触发验证请求
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[3,12],
  remote:{
  url:"ajax_check.action",
  type:"post"
  }
  },
  spass:{
  required:true,
  rangelength:[6,12]
  },
  spass2:{
  required:true,
  equalTo:'#spass' //表示和id="spass"的值相同
  },
  saddress:{
  required:true
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 },
 messages:{
  sname:{
  required:"请输入用户名",
  rangelength:$.validator.format("用户名长度在必须为:{0}-{1}之间"),
  remote:"该用户名已存在!"
  },
  spass:{
  required:"请输入密码",
  rangelength:$.validator.format("字段长度必须为:{0}-{1}之间")
  },
  spass2:{
  required:"请再次输入密码",
  equalTo:"两次密码必须一致" //表示和id="spass"的值相同
  },
  saddress:{
  required:"请选择地址"
  },
  semail:{
  required:"请填写邮件",
  email:"邮箱格式不正确"
  },
  simage:{
  required:"请选择要上传的头像",
  extension:"文件后缀名必须为jpg,jpeg,gif,png"
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <!-- body中的内容不变,省略不写了 -->
 </body>
</html>
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
 <option value=""></option>
 <option value="1">Buga</option>
 <option value="2">Baga</option>
 <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
 <option value="b">Banana</option>
 <option value="a">Apple</option>
 <option value="p">Peach</option>
 <option value="t">Turtle</option>
</select>

  我们看到,在sname里面新加了个remote方法,这个是用来远程验证的,参数url是要发送的请求Action,所以我们后台写个AjaxAction,在AjaxAction中写过check方法来,判断用户名是否为admin,如果是,则以流的形式返回false,前台接收到false就会验证失败,返回true则验证成功。失败了则告诉用户该用户名已存在,后台Action这里就不写了,见我上传的源码即可。我们来看下效果:

附表:内置验证方式:

图片 6

图片 7

7. 自定义验证方法 

本文已被整理到了《jquery表单验证大全》,欢迎大家学习阅读。

  我们也可以自定义验证的方法,比如手机号,我们可以自己定义验证方法,自己定义的方法最好写在扩展js中,我们自己写一个jquery.validate.extend.js放到js文件夹中,在该文件中写上:

以上就是针对jQuery
Validate表单验证的深入学习,希望对大家的学习有所帮助。

//自定义方法,完成手机号码的验证
//name:自定义方法的名称,method:函数体, message:错误消息
$.validator.addMethod("phone", function(value, element, param){
 //方法中又有三个参数:value:被验证的值, element:当前验证的dom对象,param:参数(多个即是数组)
 //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
 return new RegExp(/^1[3458]\d{9}$/).test(value);

}, "手机号码不正确");

您可能感兴趣的文章:

  • jQuery
    validate插件实现ajax验证重复的2种方法
  • jQuery
    validate插件submitHandler提交导致死循环解决方法
  • 深入学习jQuery
    Validate表单验证(二)
  • 深入学习jQuery
    Validate表单验证
  • jquery
    validate表单验证的基本用法入门
  • jQuery
    easyui的validatebox校验规则扩展及easyui校验框validatebox用法
  • jquery.validate
    自定义验证方法及validate相关参数
  • jQuery插件Validate实现自定义校验结果样式
  • 快速学习jQuery插件
    jquery.validate.js表单验证插件使用方法
  • jQuery插件EasyUI校验规则
    validatebox验证框
  • jquery.validate提示错误信息位置方法

  addMethod表示新加的方法,第一个参数是方法名,第二个参数是函数体,第三个参数表示验证错误消息。其中函数体中,又有三个参数,value表示验证的值,element表示当前dom对象,param表示参数。我们使用正则表达式验证了手机号。这里就不测试了。最后我们来看一下终极的表单验证,终极验证表单需要加上CSS了,下面是完整的终极验证代码。

8. 验证表单完整版

8.1 Html表单

  为了让表单结构简单而清晰,我们将表单的每个元素都包裹在一个div结构中:用label标签用来标记元素的名称,接着便是表单元素本身。【注明:1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时,浏览器就会自动将焦点转到和label相关的表单控件上。2.每个需要校验的表单元素都应该设置id和name属性,方便在使用插件时将元素绑定校验规则和校验信息。】

  表单实现代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>jquery validate验证</title>
 <link rel="stylesheet" href="css/form.css" />
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript" src="js/additional-methods.js"></script>
 <script type="text/javascript" src="js/jquery.validate.extend.js"></script>
 <script type="text/javascript">
 $(function(){

 //让当前表单调用validate方法,实现表单验证功能
 $("#ff").validate({
 debug:true, //调试模式,即使验证成功也不会跳转到目标页面
 rules:{ //配置验证规则,key就是被验证的dom对象,value就是调用验证的方法(也是json格式)
  sname:{
  required:true, //必填。如果验证方法不需要参数,则配置为true
  rangelength:[4,12],
  remote:{
  url:"ajax_check.action",
  type:"post"
  }
  },
  spass:{
  required:true,
  rangelength:[6,16]
  },
  spass2:{
  required:true,
  equalTo:'#password' //表示和id="spass"的值相同
  },
  saddress:{
  required:true
  },
  sphone:{
  required:true,
  phone:true
  },
  slike:{
  required:true,
  },
  semail:{
  required:true,
  email:true
  },
  simage:{
  required:true,
  extension:'gif|jpe?g|png'
  }
 },
 messages:{
  sname:{
  required:"请输入用户名",
  rangelength:$.validator.format("用户名长度为{0}-{1}个字符"),
  remote:"该用户名已存在!"
  },
  spass:{
  required:"请输入密码",
  rangelength:$.validator.format("密码长度为{0}-{1}个字符")
  },
  spass2:{
  required:"请再次输入密码",
  equalTo:"两次密码必须一致" //表示和id="spass"的值相同
  },
  sphone:{
  required:"请输入手机号"
  },
  saddress:{
  required:"请选择地址"
  },
  slike:{
  required:"请选择爱好",
  },
  semail:{
  required:"请填写邮件",
  email:"邮箱格式不正确"
  },
  simage:{
  required:"请选择要上传的头像",
  extension:"文件后缀名必须为jpg,jpeg,gif,png"
  }
 }
 });
 });
 </script>
 </head>

 <body>
 <form action="http://www.hao123.com" method="post" id="ff">
 <fieldset>
 <legend>jQuery-Validate表单校验验证</legend>
 <div class="item">
 <label for="username" class="item-label">用户名:</label>
 <input type="text" id="username" name="sname" class="item-text" placeholder="设置用户名"
 autocomplete="off" tip="请输入用户名">
 </div>
 <div class="item">
 <label for="password" class="item-label">密码:</label>
 <input type="password" id="password" name="spass" class="item-text" 
 placeholder="设置密码" tip="长度为6-16个字符">
 </div>
 <div class="item">
 <label for="password" class="item-label">确认密码:</label>
 <input type="password" name="spass2" class="item-text" placeholder="设置确认密码">
 </div>
 <div class="item">
 <label for="phone" class="item-label">手机号码:</label>
 <input type="text" id="phone" name="sphone" class="item-text" placeholder="输入手机号码" tip="请输入手机号码">
 </div>
 <div class="item">
 <label for="saddress" class="item-label">所在地:</label>
 <select name="saddress" class="item-select">
  <option value="">---请选择---</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="深圳">深圳</option>
 </select>
 </div>
 <div class="item">
 <label for="slike" class="item-label">爱好:</label>
   上网:<input type="checkbox" name="slike" value="上网"/>
 唱歌:<input type="checkbox" name="slike" value="唱歌"/>
 编程:<input type="checkbox" name="slike" value="编程"/>
 书法:<input type="checkbox" name="slike" value="书法"/><br/>
 </div>
 <div class="item">
 <label for="semail" class="item-label">邮箱:</label>
 <input type="text" id="semail" name="semail" class="item-text" placeholder="设置邮箱" 
 autocomplete="off" tip="请输入邮箱">
 </div>
 <div class="item">
 <label for="simage" class="item-label">头像:</label>
 <input type="file" name="simage" class="item-file">
 </div>
 <div class="item">
 <input type="submit" value="提交" class="item-submit">
 </div>
 </fieldset>
 </form>
 </body>
</html>

8.2 表单验证js逻辑

  接着我们通过js来实现对表单元素的校验。在校验之前,我对jquery
validate插件进行了功能扩展,对默认的选项进行了重写覆盖。jquery
validate插件默认只提供了校验正确及错误时的提示,缺少我们常见的帮助信息提示。为了解决这个问题,我研究了插件的源码,发现插件本身提供了onfocusin(校验元素获得焦点时调用)和onfocusout(校验元素失去焦点时调用)这两个函数。通过修改默认参数的这两个接口,可以实现党用户鼠标点击或选择元素时(即元素获得焦点),提示帮助信息;在用户鼠标离开元素时(即元素失去焦点),移除帮助信息。
  此外,jquery
validate默认提供表单元素输入时的实时校验,因为我们要求在输入时只提示用户帮助信息,故需要关闭输入的实时校验,为此我们将默认参数中的onkeyup设置为null。
  具体的扩展改进代码我放到了新增js脚本jquery.validate.extend.js中,代码如下:

/*************************插件新功能-设置插件validator的默认参数*****************************************/
$.validator.setDefaults({
 /*关闭键盘输入时的实时校验*/
 onkeyup: null,
 /*添加校验成功后的执行函数--修改提示内容,并为正确提示信息添加新的样式(默认是valid)*/
 success: function(label){
 /*label的默认正确样式为valid,需要通过validClass来重置,否则这里添加的其他样式不能被清除*/
 label.text('').addClass('valid');
 },
 /*重写校验元素获得焦点后的执行函数--增加[1.光标移入元素时的帮助提示,2.校验元素的高亮显示]两个功能点*/
 onfocusin: function( element ) {
 this.lastActive = element;

 /*1.帮助提示功能*/
 this.addWrapper(this.errorsFor(element)).hide();
 var tip = $(element).attr('tip');
 //alert(tip);
 if(tip && $(element).parent().children(".tip").length === 0){
 $(element).parent().append("<label class='tip'>" + tip + "</label>");
 }

 /*2.校验元素的高亮显示*/
 $(element).addClass('highlight');

 // Hide error label and remove error class on focus if enabled
 if ( this.settings.focusCleanup ) {
 if ( this.settings.unhighlight ) {
 this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
 }
 this.hideThese( this.errorsFor( element ) );
 }
 },
 /*重写校验元素焦点离开时的执行函数--移除[1.添加的帮助提示,2.校验元素的高亮显示]*/
 onfocusout: function( element ) {
 /*1.帮助提示信息移除*/
 $(element).parent().children(".tip").remove();

 /*2.校验元素高亮样式移除*/
 $(element).removeClass('highlight');

 /*3.替换下面注释的原始代码,任何时候光标离开元素都触发校验功能*/
 //this.element( element );

 if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
 this.element( element );
 }
 }
});

//自定义方法,完成手机号码的验证
//name:自定义方法的名称,method:函数体, message:错误消息
$.validator.addMethod("phone", function(value, element, param){
 //方法中又有三个参数:value:被验证的值, element:当前验证的dom对象,param:参数(多个即是数组)
 //alert(value + "," + $(element).val() + "," + param[0] + "," + param[1]);
 return new RegExp(/^1[3458]\d{9}$/).test(value);

}, "手机号码不正确");

8.3 表单验证css样式

  最后还要为页面元素添加css样式。插件中有一系列默认选项:其中默认错误显示标签为label,错误样式为label.error。上面在jquery.validate.extend.js文件中,有一个success函数需要说明一下。这个函数是在校验成功的时候执行的,我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示,需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签,该标签仅在校验元素获得焦点时生成。为此,还需要设置label的tip样式。
  完整的样式文件内容具体如下:

body{
 font-family: Microsoft Yahei;
 font-size: 15px;
}

fieldset{ width: 650px; }

legend{ 
 text-align: center;
 font-size: 20px;
}

.item{
 height: 56px;
 line-height: 30px;
 margin: 10px;
}

.item .item-label{
 float: left;
 width: 80px;
 text-align: right;
}

.item-text{
 float: left;
 width: 240px;
 height: 30px;
 padding: 9px 25px 9px 5px;
 margin-left: 10px;
 border: 1px solid #ccc;
 overflow: hidden;
}

.item-select{
 float: left;
 height: 30px;
 border: 1px solid #ccc;
 margin-left: 10px;
 font-size: 14px;
 padding: 6px 0px;
}

.item-file{
 float: left;
 height: 30px;
 margin-left: 10px;
 font-size: 14px;
 padding: 6px 0px;
}

.item-submit{
 float: left;
 height: 30px;
 width: 50px;
 margin-left: 90px;
 font-size: 14px;
}

input.error{
 border: 1px solid #E6594E;
}

input.highlight{
 border: 1px solid #7abd54;
}

label.error{
 float: left;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: left;
 margin-left: 5px;
 padding-left: 35px;
 color: red;
 background: url('../image/error.png') no-repeat left center;
}

label.tip{
 float: left;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: left;
 margin-left: 5px;
 padding-left: 35px;
 color: #aaa;
 background: url('../image/tip.png') no-repeat left center;
 padding-left: 35px;
}

label.valid{
 background: url('../image/valid.png') no-repeat left center;
}

  至此,表单验证就做好了,这里就不再展示了,看最前面即可。效果还可以,不过还可以更加完善,我对jQuery了解的也不太多,希望大家共同进步!

源码下载:验证插件validate.rar)

原文地址:

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • jQuery
    validate插件实现ajax验证重复的2种方法
  • jQuery
    Validate插件实现表单验证
  • jQuery
    validate插件功能与用法详解
  • jQuery
    validata插件实现方法