上一节 我们简单介绍了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验证的操作