jquery.validate使用详解


Posted in Javascript onJune 02, 2016

一、简单应用实例:

1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则。

<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery.validate.min.js"></script>
<h2>ValidateTest</h2>
<form id="loginForm" action="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
 
<input type="text" id="UserEmail" class="required email" /></td>
  </tr>
  <tr>
   <td>
 

<input type="password" id="Password" class="required" /></td>
  </tr>
  <tr>
   <td>
    <input type="submit" value="submit" onclick="checkInput();" />
   </td>
  </tr>
 </table>
</form>
<script language="javascript" type="text/javascript">
 function checkInput() {
  if ($("#loginForm").valid()) {
   return true;
  }
  return false;
 }
</script>

当然,如果不希望使用onclick事件进行提交验证,也可以在页面加载时加上jQuery的监控,代码如下:

$(document).ready(function () {
 jQuery("#loginForm").validate();
});

这时就不需要在提交按钮上加 onclick="checkInput();"这个事件了。

2.使用Json字符串验证,使用该规则验证,必须额外引入jquery.metadata.pack.js文件

修改上面的两个INPUT如下:

<input type="text" id="UserEmail" class="{validate:{ required:true,email:true }}" />
<input type="password" id="Password" class="{validate:{required:true,minlength:6,messages:{required:'请输入密码 ',minlength:'密码至少6位'}}}" />

可以看到,我们已经可以自定义错误消息了。

另外必须在页面中加上以下代码:

$(document).ready(function () {
 $("#loginForm").validate({
  meta: "validate"
 });
});

二、验证规则的应用

1.使用class验证的规则:

在class中可以使用:required,email,number,url,date,dateISO,dateDE,digits,creditcard,phoneUS

可以增加属性:minlength,maxlength,min,max,accept,remote(注:请检查是否返回是bool还是xml),equalTo='#password'

没有找到使用办法的内置方法:required(dependency-expression),required(dependency-callback),range,rangelength

2.使用Json对象验证的规则:

在class中进行如下定义:class=“{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”

我们仍可进行以下定义:number:true, email:true, url:true, date:true, dateISO:true, dateDE:true, digits:true, creditcard:true, phoneUS:true

min:3, max:10, minlength:3, maxlength:10,required: '#other:checked'【此处表达式函数为required(dependency-expression)】

相比使用class来说,我们已经可以使用range方法了,可定义为数字range:[3,10],字符串长度rangelength:[3,10],remote:url,accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'

没有找到使用方法的内置方法:required(dependency-callback)

三、高级验证方法

在前面说到的简单验证中,使用起来非常简单,有些傻瓜式的味道,但毕竟有些内置规则不能使用。但要想做到灵活运用,还是需要通过JS编码来完成。这样不但所有的内置规则可以使用,而且我们还可以自定义验证规则。以下实例我从易到难逐个列出:

1.编写JS的简单方法

仍以登录验证为例:

<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery.validate.min.js"></script>
<h2>Validate-High</h2>
<form action="" id="loginForm" method="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <input type="text" id="UserEmail" />
   </td>
  </tr>
  <tr>
   <td>
   <input type="password" id="Password" />
   </td>
  </tr>
  <tr>
   <td>
   <input type="submit" value="submit"/>
   </td>
  </tr>
 </table>
</form>

<script language="javascript" type="text/javascript">

$(document).ready(function () {
 var validateOpts = {
  rules: {
   UserEmail: {
    required: true,
    email: true
   },
   Password: {
    required: true 
   }
  },
  messages: {
   UserEmail: {
    required: "请输入邮箱地址",
    email: "邮箱地址不正确"
   },
   Password: {
    required: "请输入密码" 
   }
  }
 };

 $("#loginForm").validate(validateOpts);
});
</script>

我们只需设置validate的参数即可。

2.equalTo的使用,一般在注册时会用到

<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="https://3water.com/Scripts/jquery.validate.min.js"></script>
<h2>ValidateHigh</h2>

<form action="" id="loginForm" method="post">
 <table border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
    <input type="text" id="UserEmail" /> 
   </td>
  </tr>
  <tr>
   <td>
    <input type="password" id="Password" />
   </td>
  </tr>
  <tr>
   <td>
    <input type="password" id="RePassword" />
   </td>
  </tr>
  <tr>
   <td>
    <input type="submit" value="submit"/>
   </td>
  </tr>
 </table>
</form>

<script language="javascript" type="text/javascript">
 $(document).ready(function () {
  var validateOpts = {
   rules: {
    UserEmail: {
     required: true,
     email: true
    },
    Password: {
     required: true
    },
    RePassword: {
     equalTo: "#Password"
    }
   },
   messages: {
    UserEmail: {
     required: "请输入邮箱地址",
     email: "邮箱地址不正确"
    },
    Password: {
     required: "请输入密码"
    },
    RePassword: {
     equalTo: "两次输入密码必须相同"
    }
   }
  };
  $("#loginForm").validate(validateOpts);
 });
</script>

3.required(dependency-callback)的使用,绿色字体。

var validateOpts = {
 rules: {
  age: {
   required: true,
   min: 3
  },
  parent: {
   required: function (element) {
    return $("#age").val() < 13;
   }
  }
 }
}

4.自定义规则,使用addMethod方法,如下:

//方法接收三个参数(value,element,param)
//value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法
//比如有一个字段,只能输一个字母,范围是a-f,写法如下

$.validator.addMethod("af", function (value, element, params) {
 if (value.length >1) {
  returnfalse;
 }
 if (value >=params[0] && value <=params[1]) {
  returntrue;
 } else {
  returnfalse;
 }
}, "必须是一个字母,且a-f");

这样我们就可以在rules中加上这个规则,如下

var validateOpts = {
 rules: {
  selectorId: {
   af: ["a","f"]//如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
  }
 }
}

另外,经过试验,在Json方式中,我们可以使用af:['a','f'],这个验证可以起作用,在class方式中,在某个元素上增加af='af',验证也可以起到作用。

5.ajax验证,使用remote

remote: {
 url:"CheckEmail",
 type:"post",
 dataType:"json"
}

如果我们验证的方法是返回Boolean类型,这个方法是没有问题的。但很多时候我们可能返回的信息会更多,或者返回其它类型,这时我们可以重新定义一个新的remote方法,示例如下(返回一个Json对象):

$.validator.addMethod("jsonremome", function (value, element, param) {
 if (this.optional(element))
  return"dependency-mismatch";

 var previous =this.previousValue(element);
 if (!this.settings.messages[element.name])
  this.settings.messages[element.name] = {};

 previous.originalMessage =this.settings.messages[element.name].remote;
 this.settings.messages[element.name].remote = previous.message;

 param =typeof param =="string"&& { url: param} || param;

 if (previous.old !== value) {

  previous.old = value;
  var validator =this;
  this.startRequest(element);
  var data = {};
  data[element.name] = value;

  $.ajax($.extend(true, {
   url: param,
   mode: "abort",
   port: "validate"+ element.name,
   dataType: "json",
   data: data,
   success: function (response) {
    validator.settings.messages[element.name].remote = previous.originalMessage;
    //var valid = response === true;
    var valid = response.Result ===true;
    if (valid) {
     var submitted = validator.formSubmitted;
     validator.prepareElement(element);
     validator.formSubmitted = submitted;
     validator.successList.push(element);
     validator.showErrors();
    } else {
     var errors = {};
     //var message = (response.Message || validator.defaultMessage(element, "jsonremote"));
     var message = response.Message ||"远程验证未通过";
     errors[element.name] = $.isFunction(message) ? message(value) : message;
     validator.showErrors(errors);
    }
    previous.valid = valid;
    validator.stopRequest(element, valid);
   }
  }, param));
  return"pending";
 } elseif (this.pending[element.name]) {
  return"pending";
 }
 return previous.valid;

});

服务器端方法如下(MVC中):

public JsonResult CheckEmail(string UserEmail)
{
 returnnew JsonResult { Data =new { Result =false, Message="Please change the filed" } };
}

我们就可以使用jsonremote来取代remote方法了。当然,remote方法依然可以使用。

6.错误显示规则

var validateOpts = {
 wrapper: "div",// default has no wrapper
 errorClass: "invalid", // the default value is error
 errorElement: "em", // default value is lable
 errorLabelContainer: "#messageBox", // to gather all the error messages
}

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
jQuery ajax应用总结
Jun 02 #Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 #Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 #Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 #Javascript
Javascript小技能总结(推荐)
Jun 02 #Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 #Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
工程总经理工作职责
2013/12/09 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
生日主持词
2014/03/20 职场文书
律师函格式范本
2015/05/27 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL