基于jqurey事件委托,实现表单验证
2018-04-02 本文已影响0人
WestLonely
1 预备知识
- 1 时间委托,
- 2 自定义属性.
- 3 事件流,
- 4 正则表达式
需求分析 :
估计表单验证用的最多的地方就是登陆注册了,这种类型的表单验证比较简单,简单并不是因为在逻辑上,而是因为内容简单.
这次在项目中遇到了有大量的表单需要验证,总体的思路就是 : 利用事件委托,当 input 输入框失去焦点的时候,判断是否符合要求;那这次输入的类型比较统一,为了方便理解,这里就以仅允许输入两个大写字母为例进行验证;直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<form action="" id='form'>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
<div>输入两位大写字母 : <input type="text"></div>
</form>
<div>
<button type="button" onclick="submit()">提交按钮</button>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
var reg = /[A-Z]{1}/;
var arr = [];
$ ( "#form" ).on ( 'blur', 'input', function ( e ) {
var val = $ ( this ).val ();
console.log ( val );
if ( reg.test ( val ) ) {
$ ( this ).css ( {
border: '1px solid #ccc'
} );
$ ( this ).attr ( 'data-true', 'success' );
}
else {
$ ( this ).css ( {
border: '1px solid #f00'
} );
$ ( this ).attr ( 'data-true', 'error' );
}
} )
function submit ( e ) {
var len = $ ( '#form input' ).length;
for ( var i = 0; i < len; i++ ) {
if ( $ ( '#form input' ).eq ( i ).attr ( 'data-true' ) == 'error' ) {
/* $('#form input').eq(i).attr('data-true') == 'error'
* $ ( '#form input' ).eq ( i ).attr ( 'data-true' )有三个值分别为:
* 验证正确的是 success,
* 验证错误的是 error,
* 未验证的是undefined,
* 遍历 input 属性,如果error,放进数组中,根据不同的需求,改变验证验证条件.
*/
arr.push ( 'error' )
}
}
if ( arr.length <= 0 ) { // 如果全部选中,则在循环中将 ' success ' push 进数组中,根据不同的业务为需求,相应的改变判断条件即可.
// 提交表单逻辑
}
}
</script>
</body>
</html>
