分享一个前端验证插件

好久没有更博了年底了 项目太忙

分享一个最近在写的插件

前端验证表单,验证不通过报错

写的时间仓促,可能会有bug。。。恳请指正,已加完善


页面中的的dom结构为

<div class="rows employee-name">
        <label class="form-label">姓名:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require"  type="text"  placeholder="请输入姓名">
        </div>
    </div>

搭配css

.rows {
    width: 400px;
    overflow: hidden;
    margin-bottom: 10px;
}
.rows .form-label {
    float: left;
    width: 50%;
    text-align: center;
    color: black;
}
.rows .input-box {
    float: left;
    width: 50%;
}
.rows .input-box input[type=text].form-input,
.rows .input-box input[type=password].form-input {
    width: 100%;
}
.input-box input.form-input {
    width: auto;
    height: auto;
    float: left;
}
.rows .input-box span.form-radio {
    width: 50%;
    float: left;
}
.error-text {
    color: red;
    text-align: left;
}
.has-error .form-input {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.has-error .form-input:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
}
.has-error .form-label {
    color: #a94442;
}

上个html的demo

<div class="rows employee-name">
        <label class="form-label">姓名:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require"  type="text"  placeholder="请输入姓名">
        </div>
    </div>
    <div class="rows employee-password">
        <label class="form-label">密码:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require password"  type="password" name="password" placeholder="请输入密码">
        </div>
    </div>
    <div class="rows employee-passwordCon">
        <label class="form-label">重复密码:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require password-confirm"  type="password" name="password" placeholder="请输入重复密码">
        </div>
    </div>
    <div class="rows employee-gender">
        <label class="form-label">性别:</label>
        <div class="input-box">
            <span class="form-radio">
                <input class="form-input verify" data-verify="require" type="radio" name="gender" value="男" />男
            </span>
            <span class="form-radio">
                <input class="form-input verify" data-verify="require" type="radio" name="gender" value="女" />女
            </span>
        </div>
    </div>
    <div class="rows employee-salary">
        <label class="form-label">工资:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="all-number" type="text"  name="salary" placeholder="请输入工资">
        </div>
        
    </div>
    <div class="rows employee-phone">
        <label class="form-label">电话:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="phone" type="text" name="phone" placeholder="请输入电话">
        </div>
    </div>
    <div class="rows employee-mail">
        <label class="form-label">邮箱:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="mail" type="text" name="mail" placeholder="请输入邮箱">
        </div>
    </div>
    <div class="rows employee-verifyCode">
        <label class="form-label">验证码:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="custom" data-rule="^\d{6}$" data-text="输入错误" type="text" name="mail" placeholder="请输入验证码">
        </div>
    </div>
    <div class="rows">
        <label class="form-label">身份证号:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="identity" type="text" name="identity" placeholder="请输入身份证号">
        </div>
    </div>
    <div class="rows">
        <label class="form-label">银行卡号:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require number bank-card" type="text" name="bankCard" placeholder="请输入银行卡号">
        </div>
    </div>
    <div class="rows">
        <label class="form-label">出生日期:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="date" data-rule="-" data-text="日期格式错误" type="text" name="date" placeholder="请输入出生日期" />
        </div>
    </div>
    <div class="rows">
        <label class="form-label">只有上限:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="number inputLength" data-max="20" type="text" name="company" placeholder="请输入公司名称">
        </div>
    </div>
    <div class="rows">
        <label class="form-label">只有下线:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="number inputLength" data-min="5" type="text" name="workPlace" placeholder="请输入工作地点">
        </div>
    </div>
    <div class="rows">
        <label class="form-label">长度限制:</label>
        <div class="input-box">
            <input class="form-input verify" data-verify="require inputLength" data-min="5" data-max="10" type="text" name="workPlace" placeholder="请输入工作地点">
        </div>
    </div>
    <div class="rows employee-city">
        <label class="form-label">城市:</label>
        <div class="input-box">
            <select class="form-input verify" data-verify="require" name="employee-city">
                <option></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
            </select>
        </div>
    </div>

关键来了js代码

// 验证使用规则:
// 第一个参数是 是否必填require 选填可以不写
// 支持多种验证类型判断,中间以空格分开就可以
// 现在支持的种类有:
// 1.password 密码; 
//<input class="verify" data-verify="require password" data-name="密码" data-ajax="1" type="password" >
//data-name是报错的时候XX不能为空的那个XX,若是选填的话,可以不写这个 data-ajax是是否去后台验证的参数,0或者不写是不需要后台判断密码强度,1是需要后台判断密码强度
// 2.password-confirm 重复密码;
//<input class="verify" data-verify="require password-confirm" data-name="重复密码密码" type="password" >
//密码和重复密码的两个input的name有要求,重复密码的name必须是密码的name前加‘confirm_’如name='new-password' name='confirm_new-password'
// 3.number正整数;
//<input class="verify" data-verify="number" type="text" >
// 4.float两位正小数;
//<input class="verify" data-verify="float" type="text" >
// 5.all-number正负两位小数;
//<input class="verify" data-verify="all-number" type="text" >
// 6.phone手机号;
//<input class="verify" data-verify="phone" type="text" >
// 7.email邮箱;
//<input class="verify" data-verify="email" type="text" >
// 8.verfiy-code验证码;
//<input class="verify" data-verify="verfiy-code" type="text" >
// 9.identity身份证;
//<input class="verify" data-verify="identity" type="text" >
// 10.bank-card银行卡;
//<input class="verify" data-verify="bank-card" type="text" >
// 11.input-length长度限制;
//     只有上限;只有下限;有上下限;
//<input class="verify" data-verify="input-length" data-max="20" type="text" >//只有上限
//<input class="verify" data-verify="input-length" data-min="2" type="text" >//只有下限
//<input class="verify" data-verify="input-length" data-min="2" data-max="20" type="text" >//上下限
// 12.custom自定义验证规则和提示文字;
//<input class="verify" data-verify="custom" data-rule="/^[a-zA-Z]{1,3}$/" data-text="输入错误" type="text" >
// 13.date日期强转2012-01-01形式;
//<input class="verify" data-verify="date" type="text" >
// 14.org-code组织机构代码证;
//<input class="verify" data-verify="org-code" type="text" >
$(".verify").blur(function(){
    verifyForm($(this));
});
function verifyForm (obj){
    var verifyType = $(obj).data("verify");//验证类型
    var verifyName = $(obj).data("name");//验证提示项目名称
    var objVal = $.trim($(obj).val());//值
    var parent = $(obj).parents(".input-box");//父级元素
    var grandfather = $(obj).parents(".rows");//祖先元素


    if(verifyType == "require"){
        //必填项
        require();
    }else {
        var args = verifyType.split(" ");
        if(args[0] == "require"){
            //必填
            if(require() != false){
                eachCheck(args,true);
            }
        }else{
            //选填
            //执行之后的验证
            if(objVal){
                eachCheck(args,false);
            }else {
                clearError();
                return true;
            }
        }
    }


    //循环验证填入项
    function eachCheck(args, require){
        var i = 0;
        var len = args.length;
        if(require == true){
            i = 1;
        }


        for(; i < len; i++){
            if(args[i] == "password"){//密码
                passwordCheck();
            }else if(args[i] == "password-original"){
                passwordOriginalCheck();
            }else if(args[i] == "password-confirm"){
                if(!passwordConfirmCheck()){//重复密码
                    break;
                }
            }else if(args[i] == "number"){//整数
                if(!regularCheck(/^\d*$/,"输入必须是数字!")){
                    break;
                }
            }else if(args[i] == "float"){//两位小数
                if(!regularCheck(/^[0-9]+(.[0-9]{2})?$/,"输入必须是数字,支持最多两位小数!")){
                    break;
                }
            }else if(args[i] == "all-number"){//正负两位小数
                if(!regularCheck(/^[+-]?\d*\.?\d{0,2}$/,"输入必须是数字,支持负数,支持最多两位小数!")){
                    break;
                }
            }else if(args[i] == "verify-code"){//验证码
                if(!regularCheck(/^\d{6}$/,"验证码输入有误!")){
                    break;
                }
            }else if(args[i] == "identity"){//身份证
                if(!regularCheck(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,"身份证号应该包含18个字符!")){
                    break;
                }
            }else if(args[i] == "bank-card"){//银行卡号
                if(!regularCheck(/^\d{15,20}$/,"银行卡号格式错误!")){
                    break;
                }
            }else if(args[i] == "telephone"){//固定电话
                if(!regularCheck(/^\d{3,4}-\d{7,8}$/,"固定电话格式错误!")){
                    break;
                }
            }else if(args[i] == "org-code"){//银行卡号
                if(orgcodevalidate()){
                    showError("组织机构代码证输入错误");
                    return false;
                }else {
                    clearError();
                    return true;
                }
            }else if(args[i] == "custom"){//自定义验证规则
                var rule_input = $(obj).data("rule");
                var text = $(obj).data("text");
                var rule = new RegExp(rule_input);
                if(!regularCheck(rule,text)){
                    break;
                }
            }else if(args[i] == "input-length") {//长度限制
                //验证的是字符不限数字
                var max = $(obj).data("max");
                var min = $(obj).data("min");
                if(max && !min){
                    //只有上限
                    inputLengthCheck("max", max);
                }else if(!max && min){
                    //只有下线
                    inputLengthCheck("min", min);
                }else if(max && min){
                    inputLengthCheck("min", min, max);
                }
            }else if(args[i] == "phone"){//手机号
                if(!regularCheck(/^1[3-9][0-9]\d{4,8}$/,"请输入正确手机号!")){
                    break;
                }else {
                    //格式正确,验证是否后台有该手机号码
                    var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
                    if(verifyAjax == 0 || verifyAjax == undefined){
                        //不用去验证
                        clearError();
                        return true;
                    }else if(verifyAjax == 1){
                        //后台判重
                        commonAjax("phone");
                    }
                }
            }else if(args[i] == "email"){//邮箱
                if(!regularCheck(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,"请输入正确邮箱!")){
                    break;
                }else {
                    //格式正确,验证是否后台有该邮箱号
                    var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
                    if(verifyAjax == 0 || verifyAjax == undefined){
                        //不用去验证
                        clearError();
                        return true;
                    }else if(verifyAjax == 1){
                        //后台判重
                        commonAjax("email");
                    }
                }
            }else if(args[i] == "date"){//日期格式
                dateCheck();
            }
        }
    }


    //验证必填项 radio也要验证
    function require(){
        if($(obj).attr("type") == "radio"){
            var radioName = $(obj).attr("name");
            if(!$("input[name="+radioName+"]:checked").val()){
                showError("请选择!");
                return false;
            }else {
                clearError();
                return true;
            }
        }else {
            if(objVal == ""){
                showError(verifyName + "不能为空!");
                return false;
            }else {
                clearError();
                return true;
            }
        }
    }


    //规则验证 公司名称 密码 小数数字 整数 正负小数 手机号码 邮箱 验证码 身份证号 银行卡号 长度限制 自定义规则
    function regularCheck(rule, text){
        if(!rule.test(objVal)){
            showError(text);
            return false;
        }else {
            clearError();
            return true;
        }
    }


    //密码验证
    function passwordCheck(){
        //密码验证和重复密码验证绑定
        var name = $(obj).attr("name");
        var pwd = $("input[name="+name+"]").val();
        var pwd_cfm = $("input[name=confirm_"+name+"]").val();
        var verifyAjax = Number($(obj).data("ajax"));//0 否 1 是
        if(pwd && !pwd_cfm){
            //没有输入重复密码
            //正常验证
            if(regularCheck(/^[0-9a-zA-Z]{8,20}$/,"密码应为8-20位字符!")){
                //前端验证通过,判断是否要去后端验证
                if(verifyAjax == 0 || verifyAjax == undefined){
                    //验证通过
                    clearError();
                    return true;
                }else if(verifyAjax == 1){
                    //ajax
                    passwordAjax();
                }
            }else {
                return false;
            }
        }else if(pwd && pwd_cfm){
            //都存在
            //先验证密码位数
            if(regularCheck(/^[0-9a-zA-Z]{8,20}$/,"密码应为8-20位字符!")){
                //密码位数验证通过
                //ajax here
                //前端验证通过,判断是否要去后端验证
                if(verifyAjax == 0 || verifyAjax == undefined){
                    //验证通过
                    //验证两次密码是否一致
                    var another_parent = $("input[name="+name+"]").parents(".input-box");
                    var another_grandfather = $("input[name=confirm_"+name+"]").parents(".rows");
                    if(pwd != pwd_cfm){
                        //两次不一致,焦点移到confirm并报错
                        another_parent.find(".error-text").remove();
                        var error = $("<div class='error-text'></div>");
                        error.text("两次输入密码不一致!");
                        another_parent.append(error);
                        another_grandfather.addClass("has-error");
                        return false;
                    }else{
                        //密码一致,没问题,清除报错信息
                        clearError();
                        another_parent.find(".error-text").remove();
                        another_grandfather.removeClass("has-error");
                        return true;
                    }
                }else if(verifyAjax == 1){
                    //ajax
                    passwordAjax(true);
                }
            }
        }
    }


    //日期格式验证
    function dateCheck(){
        var rule = $(obj).data("rule") || "-";
        var dates = objVal.split(rule);
        var year;
        var month;
        var day;
        if(dates[0].length == 4){
            //2015
            year = dates[0];
            var mm = Number(dates[1]);
            var dd = Number(dates[2]);
            //月份判断
            if(mm > 0 && mm < 10){
                month = "0" + dates[1];
            }else if(mm == 10 || mm == 11 || mm == 12){
                month = dates[1];
            }else {
                showError("日期格式不对!");
                return false;
            }


            //日期判断
            if(mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12){
                if(dd > 0 && dd < 32){
                    if(dd < 10){
                        //补位
                        day = "0" + dd;
                    }else {
                        day = dates[2];
                    }
                }else {
                    showError("日期格式不对!");
                    return false;
                }
            }else if(mm == 4 || mm == 6 || mm == 9 || mm == 11){//小月
                if(dd > 0 && dd < 31){
                    if(dd < 10){
                        //补位
                        day = "0" + dd;
                    }else {
                        day = dates[2];
                    }
                }else {
                    showError("日期格式不对!");
                    return false;
                }
            }else if(mm == 2){//二月
                if(dd > 0 && dd < 30){
                    if(dd < 10){
                        //补位
                        day = "0" + dd;
                    }else {
                        day = dates[2];
                    }
                }else {
                    showError("日期格式不对!");
                    return false;
                }
            }else {
                showError("日期格式不对!");
                return false;
            }
        }else if(dates[0].length == 8){
            //20151111
            year = dates[0].substr(0,4);
            month = dates[0].substr(4,2);
            day = dates[0].substr(6,2);


            //验证时间规则
            if(month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12"){
                if(Number(day) <= 0 || Number(day) > 31){
                    //不通过
                    showError(text);
                    return false;
                }
            }else if(month == "04" || month == "06" || month == "09" || month == "11"){
                if(Number(day) <= 0 || Number(day) > 30){
                    //不通过
                    showError(text);
                    return false;
                }
            }else if(month == "02"){
                if(Number(day) <= 0 || Number(day) > 29){
                    //不通过
                    showError(text);
                    return false;
                }
            }else {
                //不通过
                showError(text);
                return false;
            }
        }else {
            //报错
            showError("日期格式错误!");
            return false;
        }


        var new_date = year + rule + month + rule + day;
        $(obj).val(new_date);
        clearError();
        return true;
    }


    //密码重复验证
    function passwordConfirmCheck(){
        var name = $(obj).attr("name");
        var pwd = $("input[name="+name.substr(8)+"]").val();
        if(pwd){
            if(pwd != objVal){
                showError("两次输入密码不一致!");
                return false;
            }else {
                clearError();
                return true;
            }
        }else{
            showError("请先输入密码!");
            return false;
        }
    }


    //原始密码验证
    function passwordOriginalCheck(){


        $.ajax({
            type: 'POST',
            url: '',
            data: "password="+ objVal + "&_csrf=" + $("meta[name=csrf-token]").attr("content"),
            success: function (data) {
                if(!data.status){
                    //原始密码错误
                    showError("原始密码输入错误!");
                    return false;
                }else {
                    //原始密码正确
                    clearError();
                    return true;
                }
            }
        });
    }


    //验证组织机构合法性方法
    //value是组织机构的值 如XXXXXXXX-X格式
    //false 就是组织机构代码是对的
    //true 组织机构代码不合法
    function orgcodevalidate(){
        if(objVal){
            var values = objVal.split("-");
            var ws = [3, 7, 9, 10, 5, 8, 4, 2];
            var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var reg = /^([0-9A-Z]){8}$/;
            if (!reg.test(values[0])) {
                return true
            }
            var sum = 0;
            for (var i = 0; i < 8; i++) {
                sum += str.indexOf(values[0].charAt(i)) * ws[i];
            }
            var C9 = 11 - (sum % 11);
            var YC9=values[1]+'';
            if (C9 == 11) {
                C9 = '0';
            } else if (C9 == 10) {
                C9 = 'X'  ;
            } else {
                C9 = C9+'';
            }
            return YC9!=C9;
        }
    }


    //长度限制
    function inputLengthCheck(){
        if(objVal){
            var type = arguments[0];
            if(type == "min"){
                //只有下线
                if(objVal.length < arguments[1]){
                    var text = "最少输入"+arguments[1]+"个字符";
                    showError(text);
                    return false;
                }else {
                    clearError();
                    return true;
                }
            }else if(type == "max"){
                //只有上线
                if(objVal.length > arguments[1]){
                    var text = "最多输入"+arguments[1]+"个字符";
                    showError(text);
                    return false;
                }else {
                    clearError();
                    return true;
                }
            }else if(type == "min"){
                //上下线
                if(objVal.length < arguments[1] || objVal.length > arguments[2]){
                    var text = "输入"+arguments[1]+"~"+arguments[2]+"个字符";
                    showError(text);
                    return false;
                }else {
                    clearError();
                    return true;
                }
            }
        }
    }


    //密码的ajax后台判断
    function passwordAjax(status){
        var repassword = false;
        if(status == true){
            //清空重复密码
            repassword = true;
        }


        $.ajax({
            type: 'POST',
            url: '',
            data: "data[password]=" + objVal,
            success: function (data) {
                if(!data.status){
                    //密码强度不通过
                    showError(data.data.errors.password);
                    return false;
                }else {
                    //通过
                    if(repassword == true){
                        //验证两次密码是否一致
                        var name = $(obj).attr("name");
                        var pwd = $("input[name="+name+"]").val();
                        var pwd_cfm = $("input[name=confirm_"+name+"]").val();
                        var another_parent = $("input[name=confirm_"+name+"]").parents(".input-box");
                        var another_grandfather = $("input[name=confirm_"+name+"]").parents(".rows");
                        if(pwd != pwd_cfm){
                            //两次不一致,焦点移到confirm并报错
                            another_parent.find(".error-text").remove();
                            var error = $("<div class='error-text'></div>");
                            error.text("两次输入密码不一致!");
                            another_parent.append(error);
                            another_grandfather.addClass("has-error");
                            return false;
                        }else{
                            //密码一致,没问题,清除报错信息
                            clearError();
                            another_parent.find(".error-text").remove();
                            another_grandfather.removeClass("has-error");
                            return true;
                        }
                    }else {
                        clearError();
                        return true;
                    }
                }
            }
        });
    }


    //手机号码,邮箱的后台判断
    function commonAjax(type){
        $.ajax({
            type: 'POST',
            url: '',
            data: "data[" + type + "]=" + objVal,
            success: function (data) {
                if(!data.status){
                    //被占用
                    if(type == "email"){
                        showError("邮箱已被占用! ");
                    }else if(type == "phone"){
                        showError("手机号码已被占用! ");
                    }
                    return false;
                }else {
                    //没被占用
                    clearError();
                    return true;
                }
            }
        });
    }


    //报错方法
    function showError(text){
        clearError();
        var error = $("<div class='error-text'></div>");
        error.text(text);
        parent.append(error);
        grandfather.addClass("has-error");
    }


    //清除报错方法
    function clearError(){
        parent.find(".error-text").remove();
        grandfather.removeClass("has-error");
    }
}

通过这个插件,基本对正则有了大致了解, 正则确实是个很重要很好用的东西!

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页