jquery.validation.js 使用

引用文件：

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

(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} 的值")
});

}));

View Code
有一些公用的写在了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 0 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="6" 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:0}
},
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