一个简洁的通用前端输入数据校验方法

每个项目都会有对输入数据做一些简单校验的事情，比如特殊字符过滤、最大最小长度，数字、邮箱等格式验证等等。

这些验证往往在一个项目的很多表单里都有大量重复工作，因此很多前端框架都设计一套通用验证方法，来降低这个重复劳动。

但这些使用框架自带的验证方法，都需要额外增加一些文件的引用，我很烦恼这些，因为我是一个极简主义者。

因此，下面这个简单的通用校验设想就出台了：

// 通用输入校验方法，简洁明了，方便拓展修改function vivaValid(obj) {    var r   = '',        o   = $(obj),        v   = o.val(),        typ = o.get(0).tagName.toLowerCase(),     //输入框类型input、textarea、select、checkbox、radio等        reg = o.attr('vali_reg'),   //校验用正则表达式        msg = o.attr('vali_msg'),   //校验结果通知消息        max = o.attr('maxlength'),  //最大长度限制        min = o.attr('minlength'),  //最小长度限制        mth = o.attr('vali_match'), //匹配项的编号        btn = o.attr('lock_btn'),   //需禁用的按钮编号(逗号分隔)        lks = o.attr('lock_self'),  //验证不过时，是否焦点锁定自己        rqr = o.is(':required');    //是否必填    $('.warn-msg').remove();    var r = (rqr && typ == 'input'    && o.attr('type') == 'text' && !v) ? 'This can not be empty'          : (rqr && typ == 'input'    && o.attr('type') == 'checkbox' && !o.is(':checked')) ? 'Please checked it to continue'          : (rqr && typ == 'textarea' && !v) ? 'This can not be empty'          : (rqr && typ == 'select'   && !v) ? 'This must select one to continue'          : (min != undefined && v && v.length < parseInt(min, 10)) ? ('This length must be long than ' + min)          : (max != undefined && v && v.length > parseInt(max, 10)) ? ('This length must be less than ' + max)          : (reg != undefined && msg != undefined && v && !(new RegExp(reg, 'g')).test(v)) ? msg          : (mth != undefined && msg != undefined && v && v != $('#' + mth).val()) ? msg          : '';    if (r) { //校验不通过        $('<p class="help-block warn-msg">' + r + '</p>').insertAfter(o); //显示提示消息，这里样式自己灵活设定        (lks == undefined || lks) && o.focus(); //默认锁定，只有指定并且值为true，才焦点锁定自己    }           if (btn != undefined) { //指定了禁用按钮        var btns = btn.split(','); //用逗号分割指定的多个按钮编号        for (var i = 0; i < btns.length; i++) {            //根据验证结果，逐个禁用或解禁指定的提交按钮            r ? $('#' + btns[i]).attr('disabled', 'disabled') : $('#' + btns[i]).removeAttr('disabled');         }    }}

下面是调用示例：

<ul>    <li>        <input lock_btn="btnSave" onblur="vivaValid(this);"  type="text"     id="txtAccount"         required placeholder="User Name" minlength="4" maxlength="20" vali_reg="^[A-Za-z0-9_]*$" vali_msg="Must be 'A to 'Z', 'a' to 'z', '0' to '9' and '_'" value="@Model.Account"/>    </li>    <li>        <input lock_btn="btnSave" onblur="vivaValid(this);"  type="password" id="txtPassword"        required placeholder="Password"  minlength="6" maxlength="12"/>    </li>    <li>        <input lock_btn="btnSave" onblur="vivaValid(this);"  type="password" id="txtConfirmPassword" required placeholder="Confirm Password" vali_match="txtPassword" vali_msg="Must match password entered above" />    </li>    <li>        <button onclick="save();" id="btnSave">NEXT</button>    </li></ul>