Jquery 表單驗證類介紹與實例
更新時間:2013年06月09日 17:08:53 作者:
Jquery 表單驗證類介紹與實例,需要的朋友可以參考一下
[html]
<form action="" method="post" id="formValidate">
數(shù)值:<input name="" type="text" validate="number" /><span></span><br/>
浮點型:<input name="" type="text" validate="decimal" /><span></span><br/>
英文:<input name="" type="text" validate="english" /><span></span><br/>
大寫英文:<input name="" type="text" validate="upper_english" /><span></span><br/>
小寫英文:<input name="" type="text" validate="lower_english" /><span></span><br/>
郵件格式:<input name="" type="text" validate="email" /><span></span><br/>
是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/>
URL:<input name="" type="text" validate="url" /><span></span><br/>
電話號碼:<input name="" type="text" validate="phone" /><span></span><br/>
IP地址:<input name="" type="text" validate="ip" /><span></span><br/>
金額:<input name="" type="text" validate="money" /><span></span><br/>
數(shù)值或者英文或者_(dá):<input name="" type="text" validate="number_letter" /><span></span><br/>
郵政編碼:<input name="" type="text" validate="zip_code" /><span></span><br/>
可用賬號:<input name="" type="text" validate="account" /><span></span><br/>
QQ:<input name="" type="text" validate="qq" /><span></span><br/>
身份證:<input name="" type="text" validate="card" /><span></span><br/>
數(shù)值 允許為空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/>
數(shù)值 長度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/>
數(shù)值 長度 1-3 允許為空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/>
<input name="" type="submit" />
</form>
<script src="jquery.js" type="text/javascript"></script>
<script src="formValidate.js" type="text/javascript"></script>
<script type="text/javascript">
var formValidate = new formValidate();
formValidate.init({});
</script>
[javascript]
/*
* 通用JS驗證類
* 使用方法:
* var formValidate = new formValidate();
* formValidate.init({});
* 注意:
* <form action="" method="post" id="formValidate">
* id為formValidate
*
* <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span>
* validate="zip_code" 驗證是否是郵政編碼
* empty="yes" 驗證是否允許為空
* min=10 最小長度
* max=10 最大長度
* <span></span> 顯示提示內(nèi)容
*/
var formValidate = function () {
var _this = this;
this.options = {
number : {reg : /^[0-9]+$/, str : '必須為數(shù)字'},
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-\u9FA5\uf900-\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 : '只允許輸入英文字母、數(shù)字、_'},
zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '郵政編碼格式不正確'},
account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '賬號名不合法,允許5-16字符,字母下劃線和數(shù)字'},
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();
};
//設(shè)置參數(shù)
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 < min || len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度在' + min + '與' + max + '之間');
testResult = false;
return;
}
}
} else if (min) {
if (len < min) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度應(yīng)大于' + min);
testResult = false;
return;
}
}
} else if (max) {
if (len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度應(yīng)小于' + 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 '找不到該表單驗證正則項';
}
};
}
復(fù)制代碼 代碼如下:
<form action="" method="post" id="formValidate">
數(shù)值:<input name="" type="text" validate="number" /><span></span><br/>
浮點型:<input name="" type="text" validate="decimal" /><span></span><br/>
英文:<input name="" type="text" validate="english" /><span></span><br/>
大寫英文:<input name="" type="text" validate="upper_english" /><span></span><br/>
小寫英文:<input name="" type="text" validate="lower_english" /><span></span><br/>
郵件格式:<input name="" type="text" validate="email" /><span></span><br/>
是否包含中文:<input name="" type="text" validate="chinese" /><span></span><br/>
URL:<input name="" type="text" validate="url" /><span></span><br/>
電話號碼:<input name="" type="text" validate="phone" /><span></span><br/>
IP地址:<input name="" type="text" validate="ip" /><span></span><br/>
金額:<input name="" type="text" validate="money" /><span></span><br/>
數(shù)值或者英文或者_(dá):<input name="" type="text" validate="number_letter" /><span></span><br/>
郵政編碼:<input name="" type="text" validate="zip_code" /><span></span><br/>
可用賬號:<input name="" type="text" validate="account" /><span></span><br/>
QQ:<input name="" type="text" validate="qq" /><span></span><br/>
身份證:<input name="" type="text" validate="card" /><span></span><br/>
數(shù)值 允許為空:<input name="" type="text" validate="number" empty='yes' /><span></span><br/>
數(shù)值 長度 1-3:<input name="" type="text" validate="number" min=1 max=3 /><span></span><br/>
數(shù)值 長度 1-3 允許為空:<input name="" type="text" validate="number" min=1 max=3 empty='yes'/><span></span><br/>
<input name="" type="submit" />
</form>
<script src="jquery.js" type="text/javascript"></script>
<script src="formValidate.js" type="text/javascript"></script>
<script type="text/javascript">
var formValidate = new formValidate();
formValidate.init({});
</script>
[javascript]
復(fù)制代碼 代碼如下:
/*
* 通用JS驗證類
* 使用方法:
* var formValidate = new formValidate();
* formValidate.init({});
* 注意:
* <form action="" method="post" id="formValidate">
* id為formValidate
*
* <input name="" type="text" validate="zip_code" empty="yes" min=10 max=10 /><span></span>
* validate="zip_code" 驗證是否是郵政編碼
* empty="yes" 驗證是否允許為空
* min=10 最小長度
* max=10 最大長度
* <span></span> 顯示提示內(nèi)容
*/
var formValidate = function () {
var _this = this;
this.options = {
number : {reg : /^[0-9]+$/, str : '必須為數(shù)字'},
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-\u9FA5\uf900-\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 : '只允許輸入英文字母、數(shù)字、_'},
zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : '郵政編碼格式不正確'},
account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : '賬號名不合法,允許5-16字符,字母下劃線和數(shù)字'},
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();
};
//設(shè)置參數(shù)
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 < min || len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度在' + min + '與' + max + '之間');
testResult = false;
return;
}
}
} else if (min) {
if (len < min) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度應(yīng)大于' + min);
testResult = false;
return;
}
}
} else if (max) {
if (len > max) {
if (childSpan) {
childSpan.html('');
childSpan.html(' 字符串長度應(yīng)小于' + 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 '找不到該表單驗證正則項';
}
};
}
您可能感興趣的文章:
- jQuery EasyUI提交表單驗證
- jquery實現(xiàn)一個簡單的表單驗證實例
- jQuery Validate表單驗證插件 添加class屬性形式的校驗
- Jquery插件easyUi實現(xiàn)表單驗證示例
- jquery實現(xiàn)表單驗證簡單實例演示
- jquery實現(xiàn)簡單的表單驗證
- jQuery實現(xiàn)動態(tài)表單驗證時文本框抖動效果完整實例
- 基于Jquery實現(xiàn)表單驗證
- Jquery插件easyUi表單驗證提交(示例代碼)
- jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
- jquery表單驗證使用插件formValidator
- JQuery.validationEngine表單驗證插件(推薦)
相關(guān)文章
jQuery.cookie.js實現(xiàn)記錄最近瀏覽過的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實現(xiàn)記錄最近瀏覽過的商品功能,結(jié)合實例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01基于jquery的loading 加載提示效果實現(xiàn)代碼
有時候為了更好的用戶體驗,使用jquery的朋友可以參考下代碼。2011-09-09可兼容IE的獲取及設(shè)置cookie的jquery.cookie函數(shù)方法
在使用IE來測試的時候,發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個方法子啊IE下不起作用,因此有了jquery.cookie.js的由來,感興趣的朋友可以參考下2013-09-09jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁)
select2是一款jQuery插件,是普通form表單select組件的升級版。 接下來通過本文給大家介紹jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表(可搜索、可分頁),需要的的朋友參考下吧2017-05-05