Jquery 表單驗證類別介紹與實例_jquery-js教程-PHP中文網

Jquery 表單驗證類別介紹與實例_jquery

WBOY

發布： 2016-05-16 17:32:36

原創

895 人瀏覽過

[html]

複製程式碼程式碼如下：

[javascript]

複製程式碼程式碼如下：

/*
* 通用JS驗證類別
* 使用方法：
* var formValidate = new formValidate();
* formValidate.init({});
* 註：
*

* id為formValidate
*
*
* validate="zip_code" 驗證是否為郵遞區號
* empty="yes" 驗證是否允許為空
* min=10 最小長度
* max=10 最大長度
* 顯示提示內容
*/
var formValidate = function () {

var _this = this;

this.options = {
number : {reg : /^[0-9] $/, str : '必須為數字'},
decimal : {reg : /^[-]{0,1}(d )[.] (d )$/ , str : '必須為DECIMAL格式'},
english : {reg : /^[ A-Za-z] $/, str : '必須為英文字母'},
upper_english : {reg : /^[A-Z] $/, str : '必須為大寫英文字母'},
lower_english : {reg : /^[a-z] $/, str : '必須為小寫英文字母'},
email : {reg : /^([a-zA-Z0-9] [_|_|.] ?)*[a-zA-Z0-9] @([a-zA-Z0-9] [_|_|.]?)*[a-zA-Z0-9] .[a-zA-Z] {2,3}$/, str : 'Email格式不正確'},
chinese : {reg : /[u4E00-u9FA5uf900-ufa2d]/ig, str : '必須含有中文'},
url : {reg : /^[a-zA-z] ://[^s]*/, str : 'URL格式不正確'},
phone : {reg : /^[1][3][ 0-9]{9}$/ , str : '電話號碼格式不正確'},
ip : {reg : /^(d ).(d ).(d ).(d )$/ , str : 'IP位址格式不正確'},
money : {reg : /^[0-9] [.][0-9]{0,3}$/ , str : '金額格式不正確'} ,
number_letter : {reg : /^[0-9a-zA-Z_] $/ , str : '只允許輸入英文字母、數字、_'},
zip_code : {reg : /^[a -zA-Z0-9 ]{3,12}$/ , str : '郵遞區號格式不正確'},
account : {reg : /^[a-zA-Z][a-zA-Z0- 9_]{4,15}$/ , str : '帳號名不合法，允許5-16字符，字母下劃線和數字'},
qq : {reg : /[1-9][0-9] {4,}/ , str : 'QQ帳號不正確'},
card : {reg : /^(d{6})(18|19|20)?(d{2})([01] d)([0123]d)(d{3})(d|X)?$/ , str : '身分證號碼不正確'},
};

//初始化綁定表單選項
this.init = function (options) {
this.setOptions(options);
this.checkForm();
};

//設定參數
this.setOptions = function (options) {
for (var key in options) {
if (key in this.options) {
this.options[key] = options[key];
}
}
};

//偵測表單包含是否為空，最大值最小值，正規驗證
this.checkForm = function () {
$(" #formValidate").submit(function () {
var formChind = $("#formValidate").children();
var testResult = true;
formChind.each(function (i) {
var child = formChind.eq(i);
var value = child.val();
var len = value.length;
var childSpan = child.next();

//屬性中是否為空的情況
if (child.attr('empty')) {
if (child.attr('empty') == 'yes' && value == '' ) {
if (childSpan) {
childSpan.html('');
}
return;
}
}

//屬性中min 和max 最大和最小長度
var min = null;
var max = null;
if (child.attr('min')) min = child.attr('min');
if (child.attr('max')) max = child.attr('max');
if (min && max) {
if (len max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字串長度在' min '與' max '之間');
testResult = false;
return ;
}
}
} else if (min) {
if (len if (childSpan) {
childSpan.html('');
childSpan.html(' 字串長度應大於' min);
testResult = false;
return;
}
}
} else if (max) {
if ( len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字串長度應小於' max);
testResult = false;
return;
}
}
}

//正規校驗
if (child.attr('validate')) {
var type = child.attr ('validate');
var result = _this.check(value, type);
if (childSpan) {
childSpan.html('');
if (result != true) {
childSpan.html(' ' result);
testResult = false;
}
}
}

});
return testResult; });
};

//偵測單一正規選項
this.check = function (value, type) {
if (this.options[type]) {
var val = this.options[type]['reg'];
if (!val.test(value)) {
return this.options[type]['str'];
}
return true;
} else {
return '找不到該表單驗證正規項';
}
};

}

} }