引用文件:

  "~/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

最新文章

  1. C#中调用user32.dll库的keybd_Event函数,操作键盘
  2. Python 第一课
  3. tomcat配置项目的图片路径不在项目下的处理
  4. CLIQUE 聚类算法以及Java实现+多线程
  5. Qt通过QToolTip显示浮动信息
  6. Codeforces 418d Big Problems for Organizers [树形dp][倍增lca]
  7. DTcms列表隔行换色;loop自带行号
  8. WordPress公布新文章Email通知注冊用户
  9. jrae源码解析(二)
  10. ASP.NET MVC 5使用CrystalReport(水晶报表)
  11. 解析XML【C#】
  12. Oracle cloud control 12c 怎样改动sysmanpassword
  13. freemarker导出word带图片
  14. HIT 1917 Peaceful Commission
  15. Android中关于JNI 的学习(三)在JNI层訪问Java端对象
  16. NYOJ街区最短路径问题
  17. JavaScript中将对象数组中的某个属性值,批量替换成另一个数值
  18. Multiple “order by” in LINQ(转载)
  19. 把旧系统迁移到.Net Core 2.0 日记(5) Razor/HtmlHelper/资源文件
  20. asp.net core结合NLog搭建ELK实时日志分析平台

热门文章

  1. js插件----&gt;ueditor编辑器的使用
  2. Python学习之k-近邻算法
  3. 【BZOJ3012】[Usaco2012 Dec]First! Trie树+拓补排序
  4. jdbc将数据库连接信息放置配置文件中
  5. [MongoDB] 机器换IP之后的设置
  6. pta习题集 5-10 切分表达式——写个tokenizer吧
  7. java 标识符与变量
  8. Information:java: Errors occurred while compiling module &#39;spring&#39;
  9. 新安装和已安装nginx如何添加未编译安装模块/补丁
  10. MongDb的安装