基于jqurey事件委托,实现表单验证

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 1 预备知识

1 预备知识