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 相关文章推荐
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
jQuery实现的原图对比窗帘效果
Jun 15 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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
PHP 开源AJAX框架14种
2009/08/24 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
JavaScript中的Document文档对象
2008/01/16 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python实现分页效果
2017/10/25 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
求职自荐信范文格式
2013/11/29 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
公司寄语大全
2014/04/10 职场文书
幼师辞职信范文
2015/02/27 职场文书
乒乓球比赛通知
2015/04/27 职场文书
光荣之路观后感
2015/06/12 职场文书
门球健将观后感
2015/06/16 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript