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

2025-01-11 约 869 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=78133680

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

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

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

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

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

// 通用输入校验方法，简洁明了，方便拓展修改
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" οnblur="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" οnblur="vivaValid(this);"  type="password" id="txtPassword"        required placeholder="Password"  minlength="6" maxlength="12"/>
    </li>
    <li>
        <input lock_btn="btnSave" οnblur="vivaValid(this);"  type="password" id="txtConfirmPassword" required placeholder="Confirm Password" vali_match="txtPassword" vali_msg="Must match password entered above" />
    </li>
    <li>
        <button οnclick="save();" id="btnSave">NEXT</button>
    </li>
</ul>

目录

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

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