jquery validation-jquery的验证框架 详解（2）

上一节 我们简单介绍了jquery validation的小小应用。这一节我们深入一点

我们首先介绍一下message这个文件。这个文件主要是放置一些国际化的message提示，配合主验证文件使用。方便大家在又需要做国际化的项目中使用

/Scripts/validation/localization/messages_cn.js

/*
* Translated default messages for the jQuery validation plugin.
* Locale: SV (Swedish; Svenska)
*/
(function ($) {
$.extend($.validator.messages, {
email: "請輸入正確的電郵地址。",
url: "請輸入正確格式的網址。",
date: "請輸入正確格式的日期。",
dateISO: "請輸入正確格式的日期 (ISO)。",
number: "請輸入有效數字。",
digits: "只能輸入整數。",
creditcard: "請輸入有效的信用卡號碼。",
equalTo: "請再次輸入相同的值。",
accept: "請選取有效的檔案名。",
maxlength: jQuery.format(""),
minlength: "請輸入正確的亞洲萬里通會員號碼。",
rangelength: jQuery.format("請輸入長度介乎於 {0} 和 {1} 之間的字串。"),
range: jQuery.format("請輸入介乎 {0} 和 {1} 之間的數值。"),
max: jQuery.format("請輸入正確的交易金額。"),
min: jQuery.format("請輸入正確的交易金額。"),
});
} (jQuery));

如果大家有需要做国际话的 只需要copy几份这样的文件并且修改其中的提示信息为english或者中文。在使用中直接将此文件在页面引用就可替换默认的提示信息。

不知道大家有没有在某些时候 提交一些数据的时候是通过ajax的方式提交的。而这个时候 一般的设计都会使用一些a标签或者一张img做为按钮。在这种情况下我们直接把这个表单注册一个验证规则

$("#signupForm").validate(); 这种 好像有点不行。这个时候 我们需要用到另外一个function 那就是valid

<form id="ValidateForm" method="post" action="">
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" class="{required:true,minlength:5}" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
</p>
<p>
<input class="submit" type="button" value="Submit"/>
</p>
</form>

像这里 我们使用的是普通的button而并非type=submit类型按钮。这种情况 我们需要自己给这个button注册一个click事件并且验证表单数据才行

这里需要使用到$("form").valid() 由于这里的function是返回一个bool类型的 所以 只需在这个click事件中添加一个if else就可

$(function () {

$(".submit").bind("click",function(){

if ($("#ProfilesForm").valid()) {

//验证通过 处理

}
});

});

这一步就完成了一个click验证的操作