javascript - 表单验证的使用情况？

Question

一般在用户注册等页面提交信息时候做回去做表单的验证处理，我用的验证是
jqueryvalidate插件

我想问的是一个项目中有非常多的表单提交需要验证(上百个反正就是很多)时候，怎么更好地去做表单验证的处理？，jqueryValidate的处理方式如下：

$("#formId").validate({
    rules:{
      // 对表单内容的校验规则
    },
    submitHandler:function(){
      // 通过验证的处理方法 一般是提交表单的ajax请求处理
    }
})

如果这么处理的话，感觉要每个都这么写有点繁琐。
另外，想问下，从业务层面来说，是不是对每一个表单都一定要做数据校验处理？，比如有些表单前端没有去做处理，输入数据的部分，输入的非数字会不会导致问题等。

有什么更好的处理方案呢？

Answer 1

是要做处理，前端做处理即使漏掉了，后端也一定要判断，有一个说法是后端在这块是不能相信前端的，因为有技术的人是可以跳过前端的，至于你说的validate，每个表单都要写一个，唯一简便点的就是所有你会使用的规则rules最好都全部提前写好，不要用的时候在自定义，麻烦，我基本是在源码中把rules都扩展了。

Answer 2

对于表单，在前端肯定是要作处理的。

1. 对用户的输入进行判断，可以提升网站的用户体验；

2. 对前端进行处理是为了不让错误格式的数据到达后端而出现各种各样的问题。当然，即使前端的验证做的很好了，后端肯定也需要再校验一次；

3. 按照题主的说法，有上百个表单，那么可以考虑将验证条件单独列出来，做成一个单独的模块，然后，在需要的地方进行引入。

比如，在angular里，将验证条件写成一个模块，在需要用到的地方注入到控制器。

或者说，将验证条件加入到需要验证的输入框或者表单里。

Answer 3

我的理解是后端验证都是必要的，前端做验证是能够提搞用户体验和避免和后端做多次交互。

如果只是在前端做验证，而后端不做的话。别人可以不在网页上提交数据，而用一些抓包工具等等来做。这样后端又没做验证的话，那就出大事了。。

做验证本身就是一件繁琐的事情，尤其是做一些特别的验证（邮箱，网址等）。不过为了保证程序能够正常运行，还是要做的。

Answer 4

前端验证只是为了让用户有更好的体验，所有数据在后端肯定要全部重新检查一遍的。

Answer 5

前端的数据可以修改，所以后端验证些好吧

Answer 6

前后端都要做验证，前端验证只是为了让用户有更好的体验，
通常情况下，可以不通过前端浏览器模拟提交数据，如果后端不验证就惨了...

最近也在处理表单验证validator.js

var validator = new Validator('example_form',[
    {
        name:"req",
        display:"必填字段不能为空",
        rules: 'required'
    },{
        name:"alphanumeric",
        display:"字数小于5个字符|大于15个字符",
        rules: 'min_length(5)|max_length(15)'
    },{
        name:"email",
        display:"请输入您的{{email}}|这不是一个邮箱",
        rules: 'required|is_email'
    },{
        name:"minlength",
        display:"不能为空|至少输入8个字符，您输入的{{minlength}}长度少于8",
        rules: 'required|min_length(8)'
    },{
        name:"tos_checkbox",
        display:"复选框不能为空",
        rules: 'required'
    }
],function(obj,evt){

    var errors_elm = document.getElementById('error_msg');
    errors_elm.style.display = 'none';
    if(obj.errors.length>0){
        // 判断是否错误
        var error_str = '';
        for (var i = 0; i < obj.errors.length; i++) {
            error_str += i+1 + ':' + obj.errors[i].message + '；<br/>';
        }
        errors_elm.style.display = "block";
        errors_elm.innerHTML = error_str;
    }
    console.log(validator);
})

Answer 7

单独写个js把校验规则都写好，然后每个页面引入文件就好了。像jquery.validate一样，控件上面加data-validate-自定义名称=“true”这样的东西就可以了。

Answer 8

推荐你使用这个表单：https://github.com/WLDragon/sm-validator
简单的规则可以直接写在html上，还可以自定义皮肤，目前支持bootstrap样式
一个简单的规则配置就像下面这样：

<input type="text" data-rule="required;/^\d*$/请输入数字">

复杂功能可以看这个：
https://wldragon.github.io/sm-validator/
bootstrap样式例子：
https://wldragon.github.io/sm-validator/bootstrap/