基于JQ的长表单校验方案

这是根据bootstrap表单验证自己写的一个方法

原理很简单，添加和移除类名has-success和has-error,错误验证中还能设置错误信息

var formValid = {
    error: function (e, errMsg) {
        e.parents('.control-group').removeClass('has-success');
        e.parents('.control-group').addClass('has-error');
        e.siblings('.help-block').text(errMsg);
    },

    success: function (e) {
        e.parents('.control-group').removeClass('has-error');
        e.parents('.control-group').addClass('has-success');
        e.siblings('.help-block').text("");
    }

//在需要的每一处表单事件下调用方法
formValid.error($('#name'), '错误提示信息');

优点是，你可以将它使用于任何操作，如点击事件、失焦事件等，而且使用灵活，一条语句对应一个输入框;

但是同时，一条语句对应一个输入框，也就意味着维护困难，如果要新增验证条件，需要找到对应的语句做修改，容易遗漏。

后来根据需求的变动，对表单验证方式也做了优化，使用bootstrap的扩展插件sco.valid.js。首先记得在页面内链入该插件，而且要放于bootstrap之后引入

使用方法，单独在一个模块定义所有的表单验证：

var fromValid = $.scojs_valid("#formAdd",{
    //account等为输入框id名
        rules: {
            account  : ['not_empty',{'min_length': 2},{'max_length': 20}],
            email  : ['not_empty','email'],
            password : ['not_empty', {'min_length': 6}],
            confirmPassword :[{matches: 'password'}],
            code:['not_empty']
        },

        messages: {
            account: {
                not_empty: "请输入注册账号",
                min_length: "账号不少于2个字符",
                max_length: "账号不能超过20个字符"
            },
            email: {
                not_empty: "请输入邮箱",
                email: "请输入正确的邮箱"
            },
            password: {
                not_empty: "请输入登陆密码，区分大小写",
                min_length: "密码太短了，至少要6位哦"
            },
            confirmPassword:{
                matches: "两次输入密码不一致",
            },
            code:{
                not_empty: "请输入验证码",
            }
        },

        wrapper:'.form-group'
            ,onSuccess: function(response, validator, $form) {
                tipsOp(response.data,response.status);
                if(response.url){
                    setTimeout(function(){window.location.href=response.url;},3000);
                }
            }
    });

//方法调用，只需要在最终提交之前调用一次

if(!fromValid.validate()) {
    return;
};

这种方法在表单提交前调用一次，可以验证所有的表单。后期维护起来也十分方便，只需要在定义方法的地方删除或新增，不会触碰到业务代码。

缺点是不够人性化，无法针对性地验证单个表单。

可看情况对两种方法进行选择