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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
详解angular应用容器化部署
Aug 14 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python模仿网页版微信发送消息功能
2018/02/24 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python生成器generator原理及用法解析
2020/07/20 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
游戏商店:Eneba
2020/04/25 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
学习型党组织心得体会
2014/09/12 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
骨干教师考核评语
2014/12/31 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python
Python os和os.path模块详情
2022/04/02 Python