這幾天看了鋒利的jquery，感覺很不錯。特別是jquery強大的選擇器。今天就利用jquery寫了一個自己的form表單驗證的小案例。當鞏固下jquery。首先貼下代碼，當然只是一個小案例。
思路：
1、<input type="text" Validate="Date" id="date"/>這里的 Validate：是我們需要驗證的類型（屬於日期類型），這里你也可以自己定義。id屬性就不用說了。<input type="text" Validate="NotStringNull" id="notstring"/>
2、var arrayInput = jQuery('#FormData input');//獲取from表單的input標簽 這樣就可以找到form表單下所有的input標簽
3、遍歷改數組，獲取 Validate 屬性值，看是否需要驗證，在這里我用的是case匹配
4、用正則表達式來判斷或其他方來校驗改值是否合法
5、用 array 來存放結果和對應元素的ID
6、遍歷array 數組，如果判斷為false值，那么就把對應顏色的設置對應顏色的css值，提示用戶。
7、返回驗證的結果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery('button').click(function () {
var arrayInput = jQuery('#FormData input');//獲取from表單的input標簽
var isValidate = Validate(arrayInput);
if (isValidate)//如果通過則可以發生ajax請求，提交數據到后台
jQuery('#result').text('驗證通過');
else
jQuery('#result').text('驗證未通過');
});
});
//表單驗證函數
var Validate = function (arrayInput) {
//將結果和對應的ID放入該數組
var array = new Array();
//循環遍歷需要驗證的input元素
arrayInput.each(function (index, element) {
var type = jQuery(element).attr('Validate');
//獲取驗證的類型 比如日期、不為空的字符串
var Value = jQuery(element).val();
var obj = new Object();
switch (type) {
//如果是日期驗證
case 'Date':
var reg = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
if (!reg.test(Value)) {
obj.id = jQuery(element).attr('id');
obj.isval = false;
} else {
obj.id = jQuery(element).attr('id');
obj.isval = true;
}
array.push(obj);
break;
//如果是不為空的字符串驗證
case 'NotStringNull':
if (Value == "" || Value.length == 0 || Value == null) {
obj.id = jQuery(element).attr('id');
obj.isval = false;
} else {
obj.id = jQuery(element).attr('id');
obj.isval = true;
}
array.push(obj);
break;
}
})
var isbool = true;//返回結果初始值設為true
//循環遍歷結果
for (var i = 0; i < array.length; i++) {
if (array[i].isval == false) {
//驗證不通過，則改變元素的css樣式
jQuery('#' + jQuery(array[i]).attr('id')).css('background', 'red');
isbool = false;
}
}
//返回驗證結果
return isbool;
}
</script>
</head>
<body>
<button value="驗證" id="dd">驗證</button>
<form id="FormData">
<!--驗證日期-->
日期驗證:<input type="text" Validate="Date" id="date"/><br />
日期驗證:<input type="text" Validate="Date" id="date2"/><br />
<!--驗證不為空的字符串-->
不為空字符串驗證:<input type="text" Validate="NotStringNull" id="notstring"/><br />
<!--不需要最驗證-->
<input type="text" />
<span id="result"></span>
</form>
</body>
</html>
如圖：
驗證結果為 false
驗證結果為 false
驗證結果為 true
