用jquery写自己的form表单验证

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

这几天看了锋利的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>