jquery vali.validata1.11怎么支持metadata

来源：蜘蛛抓取(WebSpider) 时间：2016-08-05 05:14 标签： jquery validat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&html - jquery.validate, jquery.metadata and html5 data - Stack Overflow
to customize your list.
Announcing Stack Overflow Documentation
We started with Q&A. Technical documentation is next, and we need your help.
Whether you're a beginner or an experienced developer, you can contribute.
I'm looking into using the html5 data- attributes to pass the validation rules to jquery.validate as a stop gap until the plugin is updated with HTML5 support.
I'm using jquery 1.4.2, jquery.validate 1.7 and jquery.validate 2.1.
In my HTML I'm using code such as this:
&input name="foo" type="text" data-validate="{required:true,digits:true}" /&
In my jQuery I'm doing the following:
&script type="text/javascript"&
$.metadata.setType ("html5");
$(function ()
$('#myForm').validate ({debug:true});
This just causes an error message, validator.methods[method] is undefined
I did do a metadata() on the element with the data-validate attribute, and I got an object returned named validate with my attributes set in it, so I know metadata is finding the attribute and loading from it, but the validate plugin can't seem to handle it.
If I go back to class="{validate:{...}}" and comment out the line that configures metadata to use HTML 5, it all works as it should.
Am I doing something wrong, or is there an issue with the validate and/or metadata plugins?
$.metadata.setType("html5");
$('#myForm').validate({
meta: "validate"
21.2k24955
In case anyone runs across this using a newer version of jQuery, jQuery Validate and the jQuery metadata plugin, all of the documentation I have found for using these together is out of date.
While the jQuery Validate plugin can still make use of jQuery Metadata, the newer versions of jQuery Metadata don't support "html5" as a type anymore because jQuery now natively supports HTML5 data- attributes as a source of metadata.
However, jQuery Validate has not been updated to use this.
The solution for this (at least until jQuery Validate is updated to support the built-in support for metadata using data- attributes is to use the 'attr' type and point directly to your data- attribute.
For instance:
$.metadata.setType("attr", "data-validate");
$("form").validate();
Notice there is no need to pass the "meta" tag because the metadata library is directly going to the correct attribute to read the values.
Here is a modified jsFiddle using updated versions of all of the libraries:
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you&#39;re looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledjquery.validate使用详解
作者：Wang Juqiang
字体：[ ] 类型：转载 时间：
Ajax在Web应用中的作用越来越大，许多工具都包含了对这一功能的使用，以下是对这些常用工具中Ajax的典型实例.
一、简单应用实例：
1.用class样式进行验证，用法简单，但不能自定义错误信息，只能修改jquery-1.4.1.min.js中的内置消息，也不支持高级验证规则。
&script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"&&/script&
&script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"&&/script&
&h2&ValidateTest&/h2&
&form id="loginForm" action="post"&
&table border="0" cellpadding="0" cellspacing="0"&
　　　　&input type="text" id="UserEmail" class="required email" /&&/td&
　　　　&input type="password" id="Password" class="required" /&&/td&
&input type="submit" value="submit" onclick="checkInput();" /&
&script language="javascript" type="text/javascript"&
function checkInput() {
if ($("#loginForm").valid()) {
当然，如果不希望使用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, , 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="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"&&/script&
&script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"&&/script&
&h2&Validate-High&/h2&
&form action="" id="loginForm" method="post"&
&table border="0" cellpadding="0" cellspacing="0"&
&input type="text" id="UserEmail" /&
&input type="password" id="Password" /&
&input type="submit" value="submit"/&
&script language="javascript" type="text/javascript"&
$(document).ready(function () {
var validateOpts = {
UserEmail: {
required: true,
email: true
Password: {
required: true
messages: {
UserEmail: {
required: "请输入邮箱地址",
email: "邮箱地址不正确"
Password: {
required: "请输入密码"
$("#loginForm").validate(validateOpts);
我们只需设置validate的参数即可。
2.equalTo的使用，一般在注册时会用到
&script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery-1.4.1.min.js"&&/script&
&script type="text/javascript" language="javascript" src="http://www.jb51.net/Scripts/jquery.validate.min.js"&&/script&
&h2&ValidateHigh&/h2&
&form action="" id="loginForm" method="post"&
&table border="0" cellpadding="0" cellspacing="0"&
&input type="text" id="UserEmail" /&
&input type="password" id="Password" /&
&input type="password" id="RePassword" /&
&input type="submit" value="submit"/&
&script language="javascript" type="text/javascript"&
$(document).ready(function () {
var validateOpts = {
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)的使用，绿色字体。
var validateOpts = {
required: true,
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) {
if (value &=params[0] && value &=params[1]) {
}, "必须是一个字母,且a-f");
这样我们就可以在rules中加上这个规则，如下
var validateOpts = {
selectorId: {
af: ["a","f"]//如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
另外，经过试验，在Json方式中，我们可以使用af:['a','f']，这个验证可以起作用，在class方式中，在某个元素上增加af='af'，验证也可以起到作用。
5.ajax验证，使用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].
this.settings.messages[element.name].remote = previous.
param =typeof param =="string"&& { url: param} ||
if (previous.old !== value) {
previous.old =
var validator =
this.startRequest(element);
var data = {};
data[element.name] =
$.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.originalM
//var valid = response ===
var valid = response.Result ===
if (valid) {
var submitted = validator.formS
validator.prepareElement(element);
validator.formSubmitted =
validator.successList.push(element);
validator.showErrors();
var errors = {};
//var message = (response.Message || validator.defaultMessage(element, "jsonremote"));
var message = response.Message ||"远程验证未通过";
errors[element.name] = $.isFunction(message) &#63; message(value) :
validator.showErrors(errors);
previous.valid =
validator.stopRequest(element, valid);
}, param));
return"pending";
} elseif (this.pending[element.name]) {
return"pending";
return previous.
服务器端方法如下（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
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&jquery.validata1.11怎么支持metadata_百度知道

我要回帖

更多关于 jquery validat 的文章

 

随机推荐