使用 HTML5 原生表单验证来控制 Ajax 请求的发送

发表于 | 分类于 |

    HTML5 原生的表单验证默认是针对 form 表单的请求行为的，但是有时候我们在发送 ajax 请求时也需要用到原生表单的验证功能，具体例子如下：

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
<form onsubmit="return false;" id="myform"> //绑定 onsubmit 事件阻止原生表单请求
    用户名：<input name="username" type="text" required maxlength="10" />
    密码:   <input name="password" type="password" />
    <input type="submit" value="提交" id="submit_btn" />
</form>

<script>
    var myform = document.getElementById('myform'),
        btn    = document.getElementById('submit_btn');
    var isValid; //定义一个全局变量存储表单是否正确
    
    myform.addEventListener('invalid', function() { //注册 invalid 事件，表单验证不通过时触发
        isValid = false;
    }, true);
    
    var sendRequest = function() { //将 ajax 请求写成一个函数，并在里面判断表单验证是否通过，通过则发送请求
        if(isValid) {
            /*
            ajax 请求代码
            */
        }
    };
    
    btn.addEventListener('click', function() {
        isValid = true; //默认表单是正确的
        setTimeout(sendRequest, 0); 
        /*这里是一个重点，必须使用一个 setTimeout 来调用请求函数，这是因为 DOM 事件，Ajax，SetTimeout 都是异步执行，上面注册的 invalid 事件里面，它的回调函数的执行是异步的，所以如果这里不使用 setTimeout 将请求发送函数放入回调队列里面，就会由于变量 isValid 的值默认是 true 而使得表单验证一直都是通过的状态*/
    }, false);
    
</script>