引用文件:

  "~/assets/global/plugins/jquery-validation/js/jquery.validate.min.js",
"~/assets/global/plugins/jquery-validation/js/jquery.metadata.js",
"~/assets/global/plugins/jquery-validation/js/localization/messages_cn.js",

jquery.metadata.js

/*
* Metadata - jQuery plugin for parsing metadata from elements
*
* Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
*
*/ /**
* Sets the type of metadata to use. Metadata is encoded in JSON, and each property
* in the JSON will become a property of the element itself.
*
* There are three supported types of metadata storage:
*
* attr: Inside an attribute. The name parameter indicates *which* attribute.
*
* class: Inside the class attribute, wrapped in curly braces: { }
*
* elem: Inside a child element (e.g. a script tag). The
* name parameter indicates *which* element.
*
* The metadata for an element is loaded the first time the element is accessed via jQuery.
*
* As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
* matched by expr, then redefine the metadata type and run another $(expr) for other elements.
*
* @name $.metadata.setType
*
* @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("class")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from the class attribute
*
* @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("attr", "data")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a "data" attribute
*
* @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
* @before $.metadata.setType("elem", "script")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a nested script element
*
* @param String type The encoding type
* @param String name The name of the attribute to be used to get metadata (optional)
* @cat Plugins/Metadata
* @descr Sets the type of encoding to be used when loading metadata for the first time
* @type undefined
* @see metadata()
*/ (function($) { $.extend({
metadata : {
defaults : {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
},
setType: function( type, name ){
this.defaults.type = type;
this.defaults.name = name;
},
get: function( elem, opts ){
var settings = $.extend({},this.defaults,opts);
// check for empty string in single property
if ( !settings.single.length ) settings.single = 'metadata'; var data = $.data(elem, settings.single);
// returned cached data if it already exists
if ( data ) return data; data = "{}"; if ( settings.type == "class" ) {
var m = settings.cre.exec( elem.className );
if ( m )
data = m[];
} else if ( settings.type == "elem" ) {
if( !elem.getElementsByTagName )
return undefined;
var e = elem.getElementsByTagName(settings.name);
if ( e.length )
data = $.trim(e[].innerHTML);
} else if ( elem.getAttribute != undefined ) {
var attr = elem.getAttribute( settings.name );
if ( attr )
data = attr;
} if ( data.indexOf( '{' ) < )
data = "{" + data + "}"; data = eval("(" + data + ")"); $.data( elem, settings.single, data );
return data;
}
}
}); /**
* Returns the metadata object for the first member of the jQuery object.
*
* @name metadata
* @descr Returns element's metadata object
* @param Object opts An object contianing settings to override the defaults
* @type jQuery
* @cat Plugins/Metadata
*/
$.fn.metadata = function( opts ){
return $.metadata.get( this[], opts );
};
$.validator.setDefaults({
debug: true,
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
p.append(error);
p.appendTo(element.parent());
}
})
})(jQuery);

messages_cn.js

(function (factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "../jquery.validate"], factory);
} else {
factory(jQuery);
}
}(function ($) { $.extend($.validator.messages, {
required: "必填",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
}); }));

有一些公用的写在了metadata.js里面

$.validator.setDefaults({
debug: true,
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
p.append(error);
p.appendTo(element.parent());
}
})
<style type="text/css">
.errmsg {
margin: -30px -40px 0px;
float: right;
color: #F30;
}
</style>

就是显示错误信息位置设定

使用:

1.建表单form,

2.把控件name赋值(只要各不相同即可),并在class里面赋值,比如required

3.在最后时判断是否验证通过再进行下一步操作

  if ($("#formFinance").valid()) {
if (!financeFlag) {
financeFlag = true;
o = self.selectFinanceItem();

上面的是早期的jquery.validate.js,我测的是1.5.5版本

最新的1.13版本的使用方法发生了变动,不需要jquery.metadata.js文件

<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
</input>
</p>
<p>
<label for="chasreferee">有推荐人请勾选</label>
<input type="checkbox" id="chasreferee" name="hasreferee">
</p>
<p>
<label for="creferee">推荐人</label>
<input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
</input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>

直接data-属性使用

也可以自己手动设置具体信息:

  $("#formFinance").validate({
rules: {
fFinanceName: { required: true },
fLoanCount: { required: true ,min:}
},
messages: {
fFinanceName: {
required: "必填",
},
fLoanCount: {
required: "必填",
},
fRate: {
required: "必填",
},
fFee: {
required: "必填",
},
fPeriod: {
required: "必选",
}
},
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
p.append(error);
p.appendTo(element.parent());
}
});

http://blog.csdn.net/hliq5399/article/details/6557789

http://www.cnblogs.com/linjiqin/p/3431835.html

http://www.runoob.com/jquery/jquery-plugin-validate.html

http://www.cnblogs.com/yanjunwu/p/3764740.html

https://github.com/ffmike/jquery-validate

jquery.validation.js 使用的更多相关文章

  1. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  2. jquery.form.js+jquery.validation.js实现表单校验和提交

      一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...

  3. jquery.validation.js的自定义方法

    jQuery.validator.addMethod(name,method[,message]) name方法名 method:function(value,element,params)//val ...

  4. 转载 jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...

  5. jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...

  6. jQuery Validation Plugin

    使用方式很简单,简单测试代码如下: <html> <head> <script type="text/javascript" src="./ ...

  7. jQuery.vilidation.js登录&注册

    代码解析:通过ajax获取url路径链接php接口做登录和注册获取到的数据传到数据库. ajax利用四步: //1.创建一个ajax对象; //2.打开请求: //判断用户传递的是get还是post请 ...

  8. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  9. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

随机推荐

  1. JZOJ.5335【NOIP2017模拟8.24】早苗

    Description

  2. Java初学者笔记一:元类、获取类型、枚举

    零.绪论: 2018年新年伊始,学习Java的冲动越来越强烈,毕竟以后无论是做安全开发还是安全研究都必不可少的掌握这门语言,所以在不断完善Python作为脚本语言的主语言的情况下觉得学习Java作为高 ...

  3. jhipser微服务架构介绍

    内容提要 本文涉及以下内容: 微服务架构介绍 spring cloud介绍 jhipster架构介绍 微服务架构介绍 微服务概念 微服务和SOA很相似,都是按照业务功能把系统拆分成一个一个的服务.比如 ...

  4. mysql数据类型及存储过程

    转自:http://www.cnblogs.com/mark-chan/p/5384139.html 存储过程简介 SQL语句需要先编译然后执行,而存储过程(Stored Procedure)是一组为 ...

  5. java GC工作机制

    转自:http://www.cnblogs.com/hzdtf/articles/5419987.html GC:垃圾回收站,是将java的无用的堆对象进行清理,释放内存,以免发生内存泄露.在介绍ja ...

  6. SVN常见问题及解决方法(转载)

    svn常见符号 黄色感叹号(有冲突):--这是有冲突了,冲突就是说你对某个文件进行了修改,别人也对这个文件进行了修改,别人抢在你提交之前先提交了,这时你再提交就会被提示发生冲突,而不允许你提交,防止你 ...

  7. zabbix添加简单的监控

    本文讲述给zabbix添加zabbix自带模板和自定义添加模板:安装zabbix请参考本文 1.1. 给主机添加zabbix自带监控模板 第一步: 第二步: 如果添加模板,但是模板并没有监控项,下面的 ...

  8. ora-28056错误解决

    问题描述:今天有同事找我,说是oracle数据库的监听器出现问题,我连接服务器查看后,发现不是监听器问题,而是进程连接数已经达到150个了,客户端连接不上服务器,因其是测试服务器,重启服务器后再次sq ...

  9. 无题II---hdu2236(二分,匈牙利)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2236 要求最大值与最小值的差值最小,是通过枚举边的下限和上限来完成 只需要用二分找一个区间,然后不断枚 ...

  10. 【Python】两个for循环嵌套练习

    要求:取下方篮框中内容并写入csv文件中.用两个for循环将每一行取出来作为一个元素存放到新数组中. # coding=utf-8 from selenium import webdriver fro ...