$(function(){
var validator = $("#enterRegForm").validate({
debug:false, //調試模式取消submit的默認提交功能
//errorClass: "error",//默認為錯誤的樣式類為：error
//validClass: "check",//驗證成功后的樣式，默認字符串valid
focusInvalid: true,//表單提交時,焦點會指向第一個沒有通過驗證的域
//focusCleanup:true;//焦點指向錯誤域時，隱藏錯誤信息，不可與focusInvalid一起使用！
onkeyup: true,
errorElement: "div",
submitHandler: function(form){ //表單提交句柄,為一回調函數，帶一個參數：form
form.submit(); //提交表單
},
rules: {
"enterprise.enName": {
required: true,
minlength: 6,
remote:{
url: "/nameServlet", //后臺處理程序
type: "get", //數據發送方式
dataType: "json", //接受數據格式
data: { //要傳遞的數據
enName: function() {
return $("#enName").val();
}
}
}
},
"user.passWord":{
required:true,
rangelength:[6,18]
},
passWordConf:{
required:true,
rangelength:[6,18],
equalTo:"#passWord" //此處的passWord 是<input id="passWord"> 一開始還以為是name的值呢，氣死了
}
},
messages: { //自定義驗證消息
"enterprise.enName": {
required: "請填寫企業名稱！",
minlength: $.format("至少要{0}個字符！"),
remote:$.format("該企業名稱已存在！")
},
"user.passWord":{
required:"請填寫確認密碼！",
rangelength:$.format("密碼要在{0}-{1}個字符之間！")
},
passWordConf:{
required:"請填寫確認密碼！",
rangelength:$.format("確認密碼要在{0}-{1}個字符之間！"),
equalTo:"確認密碼要和密碼一致！"
},
errorPlacement: function(error, element) { //驗證消息放置的地方
//error.appendTo( element.parent("td").next("td").children(".msg") );
error.appendTo( element.parent(".field").next("div"));
},
highlight: function(element, errorClass) { //針對驗證的表單設置高亮
$(element).addClass(errorClass);
},
success: function(div) {
div.addClass("valid");
}
});
});
自定義方法;
新建一個js文件：$(document).ready(function(){
// 字符最小長度驗證（一個中文字符長度為2）
jQuery.validator.addMethod("stringMinLength", function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param);
}, $.validator.format("長度不能小于{0}!"));
// 字符最大長度驗證（一個中文字符長度為2）
jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <= param);
}, $.validator.format("長度不能大于{0}!"));
// 字符驗證
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、數字和下劃線");
// 中文字兩個字節
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "請確保輸入的值在3-15個字節之間(一個中文字算2個字節)");
// 字符驗證
jQuery.validator.addMethod("string", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "不允許包含特殊符號!");
// 必須以特定字符串開頭驗證
jQuery.validator.addMethod("begin", function(value, element, param) {
var begin = new RegExp("^" + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format("必須以 {0} 開頭!"));
// 驗證兩次輸入值是否不相同
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return value != $(param).val();
}, $.validator.format("兩次輸入不能相同!"));
// 驗證值不允許與特定值等于
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return value != param;
}, $.validator.format("輸入值不允許為{0}!"));
// 驗證值必須大于特定值(不能等于)
jQuery.validator.addMethod("gt", function(value, element, param) {
return value > param;
}, $.validator.format("輸入值必須大于{0}!"));
// 驗證值小數位數不能超過兩位
jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-?\d+(\.\d{1,2})?$/;
return this.optional(element) || (decimal.test(value));
}, $.validator.format("小數位數不能超過兩位!"));
//字母數字
jQuery.validator.addMethod("alnum", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和數字");
// 漢字
jQuery.validator.addMethod("chcharacter", function(value, element) {
var tel = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, "請輸入漢字");
// 身份證號碼驗證
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/.test(value)||/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test(value);
}, "請正確輸入您的身份證號碼");
// 手機號碼驗證
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請tb正確填寫您的手機號碼");
// 電話號碼驗證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //電話號碼格式010-12345678
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的電話號碼");
// 聯系電話(手機/電話皆可)驗證
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "請正確填寫您的聯系電話");
// 郵政編碼驗證
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
});
該文件要先被引用再對form進行驗證。
注意：remote 中的url 為servlet，但是這個servlet該怎么寫呢
一開始以為是跟平時的一樣：out.println("用戶名"+name+"已存在！");
雖然可以驗證，但是還是存在問題：輸入個不存在的name還是提示存在。
后來還是Google，看到別人也是犯了這樣的錯誤，解決方法時返回true,false.
但是 doGet 是void類型的，return true 是行不通的。
后來又請教群里的高手，正確寫法是out.println("true");就可以了。
哎，費了老長時間
總算是把問題給解決了。