jquery.validate使用详解

一、简单应用实例:

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

rush:xhtml;">

ValidateTest

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

rush:js;"> $(document).ready(function () { jQuery("#loginForm").validate(); });

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

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

修改上面的两个INPUT如下:

rush:xhtml;">

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

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

rush:js;"> $(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,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”

我们仍可进行以下定义:number:true,email: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的简单方法

仍以登录验证为例:

rush:xhtml;">

Validate-High

<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);
});

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

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

rush:xhtml;">

ValidateHigh

<form action="" id="loginForm" method="post">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

<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);
});

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

rush:js;"> 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,写法如下

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

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

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

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

5.ajax验证,使用remote

rush:js;"> remote: { url:"CheckEmail",type:"post",dataType:"json" }

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

rush:js;"> $.validator.addMethod("jsonremome",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中):

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

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

6.错误显示规则

rush:js;"> 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 }

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...