时间:2021-05-26
一、简单应用实例:
1.用class样式进行验证,用法简单,但不能自定义错误信息,只能修改jquery-1.4.1.min.js中的内置消息,也不支持高级验证规则。
<script type="text/javascript" language="javascript" src="https:///Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript" language="javascript" src="https:///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位'}}}" />可以看到,我们已经可以自定义错误消息了。
另外必须在页面中加上以下代码:
二、验证规则的应用
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:///Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript" language="javascript" src="https:///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:///Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript" language="javascript" src="https:///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)的使用,绿色字体。
4.自定义规则,使用addMethod方法,如下:
//方法接收三个参数(value,element,param)
//value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法
//比如有一个字段,只能输一个字母,范围是a-f,写法如下
这样我们就可以在rules中加上这个规则,如下
另外,经过试验,在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中):
我们就可以使用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}以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
主要分几部分jquery.validate基本用法jquery.validateAPI说明jquery.validate自定义jquery.validate常见
jQuery.Validate验证库1、下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载默认校验规则复制代
概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。方式一:是通过jquery.validate的submit
一、jQuery.validate简介 jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单。支持多事件触发,自带多种验证规则,
最近项目中做了一个jquery.validate气泡提示。好像最新版的jquery.validate中,有这个功能,但在我这里不怎么好用。就自己加了一个。找了一