jquery表单验证的问题？

Question

我在做jquery表单验证的时候用的是监控input的blur事件来做合法性检查，然后把每次检查的结果保存下来，但是有可能出现的问题是：

1. 用户先输入合法的字符串，然后tab切换input，这样就产生了一个blur事件，这时候检查的结果是合法的
2. 在提交表单之前，把输入改成不合法的，这样由于产生blur事件后不验证的话，是可以合法提交的

问题：做表单验证一般用的是否是blur事件监控？在提交表单前难道要对所有的输入再check一次吗？

Answer 1

验证事件

1. blur事件一般来看是准确的。
2. 但在某些特定环境下，也许还真的未必会触发。
3. 例①，网络缓慢，js加载与用户输入同时进行。
4. 例②，某些用js实现Ctrl+Enter提交的表单，则按Ctrl+Enter之后文本框应该是不失去焦点的。
5. 所以blur事件要用，提交前最后验证也必须要用。
6. 我推荐以下三个验证一起用：blur事件、keyup后延时（不必每次keyup都做，也不必keyup后立刻做）、表单提交前。

验证UI

1. 表单填写中的验证都是一样的：对的打绿色对号。错的把文本框略微标红，然后打个叉，能给出错误原因最好。表单提交前的验证，就是把验证对每个输入都再做一遍。
2. 正确而明显的指示，可以让用户明白错的在哪里，不必担心。
3. 一定不要用alert或相似的提醒框来打扰用户。这个的体验太差了。
4. 正确的拒绝方式是，点击提交时无任何动作，只在提交按钮上方蹦出一行红字提示“(!) 数据有错误，请返回修改”。这个可以快速闪烁两下引起注意。至于具体错了什么，让用户回表单里边找去。
5. 注意当用户开始修改的时候，就把“数据有错误，请返回修改”这些字隐藏掉，以便再次提交再次错误时，能正确的再次弹出引起注意。

后端验证不可缺少

千万不要忘了：前端验证为体验，后端验证为安全。表单传输到服务器之后，在后端一定要再次验证一遍，以防非法输入。有任何错误就跳转回表单页，并把错误信息返回去。后端的验证是绝对不可缺少的，否则就是对数据安全的严重失职。必须就是必须，这没有商量的余地，任何诸如“可以”、“最好”、“建议”一类的模棱两可的发言，都是完全不能接受的！

Answer 2

你好，使用blur事件监控应该也是可以的。你也可以去观察一下，现在表单验证基本上分为 keyup 类型(就是输入开始就立即验证)和提交型的(当然apple注册那种高级的规则验证我们就不看了)。keyup（blur）这样的做法会有一个用户体验的问题：失去焦点有可能就出现非法的提醒框，这样可能会让人看了很心烦。而提交验证在对于较长的表单验证上不是很友好，你有可能会不知道非法的位置在哪儿。
然而为了数据的准确性，提交的时候的验证是一定必要的。
废话有些多，希望对你有所帮助~

Answer 3

我是用blur事件判断的，如果是普通验证，一般用真则就好了，如果要验证是否存在，就要ajax请求了。bootstrap框架就有现成的验证，不合法就不能提交。

Answer 4

首先有一个我不是很明白的地方。就是你指的第二种情况。当你更改了原先正确的值再提交表单的话，除非是你设置了快捷键提交（例如CTRL+ENTER），否则它仍然会触发blur事件（无论你是点击提交按钮还是直接Enter提交表单），所以我不懂为什么你更改了正确值后可以提交表单而验证却不会报错。

其次，对于验证这个问题，提交表单是一个表单数据传输到服务器的最后一个步骤，无论如何最好都再次检测一遍，这在大部分的表单验证过程中都应该实现的。

Answer 5

我只能说，你的代码有问题。tab也能触发blur事件的。

提供一个提交验证的示例，我写的一个验证插件的其中一段：

formId.on('submit',function(e){
    var flag = true;
    // 若验证全部完成，则进行表单提交
    $.each(validateData, function(i, ele) {
        if (!checkObj.check(ele, checkConfig[i])) {
            flag = false;
        };
    });

    if ( !! callback && (that.getType(callback) === 'function')) {
        //存在回调的情形
        flag && callback();
    } else {
        //使用默认提交的action
        // 阻止默认提交
        !flag&&e.preventDefault();
        // flag && formId.get(0).submit();
    }
});