本文共 8310 字，大约阅读时间需要 27 分钟。

1.JS文件（formVerify.js）

//验证规则设定var verifyConfig = {    required: [        /[\S]+/        ,'必填项不能为空'    ]    ,phone: [        /^1\d{10}$/        ,'请输入正确的手机号'    ]    ,email: [        /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/        ,'邮箱格式不正确'    ]    ,url: [        /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/        ,'链接格式不正确'    ]    ,number: function(value){        if(!value || isNaN(value)) return '只能填写数字'    }    ,date: [        /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/        ,'日期格式不正确'    ]    ,identity: [        /(^\d{15}$)|(^\d{17}(x|X|\d)$)/        ,'请输入正确的身份证号'    ]};//扩展JQuery$.fn.formVerify=function(v){    var device = layui.device();    var stop = null //验证不通过状态        ,verify = verifyConfig //验证规则        ,DANGER = 'layui-form-danger' //警示样式        ,verifyElem = this.find('*[lay-verify]'); //获取需要校验的元素    //开始校验    layui.each(verifyElem, function(_, item){        var othis = $(this)            ,vers = othis.attr('lay-verify').split('|')            ,verType = othis.attr('lay-verType') //提示方式            ,value = othis.val();        othis.removeClass(DANGER); //移除警示样式        //遍历元素绑定的验证规则        layui.each(vers, function(_, thisVer){            var errorText = '' //错误提示文本                ,isFn = typeof verify[thisVer] === 'function';            //匹配验证规则            if(verify[thisVer]){                var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);                errorText = errorText || verify[thisVer][1];                if(thisVer === 'required'){                    errorText = othis.attr('lay-reqText') || errorText;                }                var verifyType=$(item).attr('type');                if(verifyType==="radio" || verifyType==="checkbox"){                    var verifyName=$(item).attr('name')                        ,verifyElem=$(item).parents('.layui-form').find('input[name='+verifyName+']');                    isTrue= !verifyElem.is(':checked');                    if(isTrue){                        var focusElem = verifyElem.next().find('i.layui-icon');                        //定位焦点                        focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});                        //对非输入框设置焦点                        focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {                            focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});                        }).focus();                        if(verType === 'tips'){                            layer.tips(errorText, function(){                                return othis.next();                            }(), {tips: 1});                        } else if(verType === 'alert'){                            layer.alert(errorText, {title: '提示', shadeClose: true});                        } else {                            layer.msg(errorText, {icon: 5, shift: 6});                        }                        return stop = true;                    }                }                //如果是必填项或者非空命中校验，则阻止提交，弹出提示                if(isTrue){                    //提示层风格                    if(verType === 'tips'){                        layer.tips(errorText, function(){                            if(typeof othis.attr('lay-ignore') !== 'string'){                                if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){                                    return othis.next();                                }                            }                            return othis;                        }(), {tips: 1});                    } else if(verType === 'alert') {                        layer.alert(errorText, {title: '提示', shadeClose: true});                    } else {                        layer.msg(errorText, {icon: 5, shift: 6});                    }                    //非移动设备自动定位焦点                    if(!device.android && !device.ios){                        setTimeout(function(){                            item.focus();                        }, 7);                    }                    othis.addClass(DANGER);                    return stop = true;                }            }        });        if(stop) return stop;    });    if(stop){        return false;    } else {        return true;    }};//直接定义JS方法function formVerify(formId){    var $ = layui.$        //,layer = layui.layer        ,device = layui.device();    var stop = null //验证不通过状态        ,verify = verifyConfig //验证规则        ,DANGER = 'layui-form-danger' //警示样式        ,verifyElem = $(formId).find('*[lay-verify]'); //获取需要校验的元素    //开始校验    layui.each(verifyElem, function(_, item){        var othis = $(this)            ,vers = othis.attr('lay-verify').split('|')            ,verType = othis.attr('lay-verType') //提示方式            ,value = othis.val();        othis.removeClass(DANGER); //移除警示样式        //遍历元素绑定的验证规则        layui.each(vers, function(_, thisVer){            var errorText = '' //错误提示文本                ,isFn = typeof verify[thisVer] === 'function';            //匹配验证规则            if(verify[thisVer]){                var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value);                errorText = errorText || verify[thisVer][1];                if(thisVer === 'required'){                    errorText = othis.attr('lay-reqText') || errorText;                }                var verifyType=$(item).attr('type');                if(verifyType==="radio" || verifyType==="checkbox"){                    var verifyName=$(item).attr('name')                        ,verifyElem=$(item).parents('.layui-form').find('input[name='+verifyName+']');                    isTrue= !verifyElem.is(':checked');                    if(isTrue){                        var focusElem = verifyElem.next().find('i.layui-icon');                        //定位焦点                        focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});                        //对非输入框设置焦点                        focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {                            focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});                        }).focus();                        if(verType === 'tips'){                            layer.tips(errorText, function(){                                return othis.next();                            }(), {tips: 1});                        } else if(verType === 'alert'){                            layer.alert(errorText, {title: '提示', shadeClose: true});                        } else {                            layer.msg(errorText, {icon: 5, shift: 6});                        }                        return stop = true;                    }                }                //如果是必填项或者非空命中校验，则阻止提交，弹出提示                if(isTrue){                    //提示层风格                    if(verType === 'tips'){                        layer.tips(errorText, function(){                            if(typeof othis.attr('lay-ignore') !== 'string'){                                if(item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type)){                                    return othis.next();                                }                            }                            return othis;                        }(), {tips: 1});                    } else if(verType === 'alert') {                        layer.alert(errorText, {title: '提示', shadeClose: true});                    } else {                        layer.msg(errorText, {icon: 5, shift: 6});                    }                    //非移动设备自动定位焦点                    if(!device.android && !device.ios){                        setTimeout(function(){                            item.focus();                        }, 7);                    }                    othis.addClass(DANGER);                    return stop = true;                }            }        });        if(stop) return stop;    });    if(stop){        return false;    } else {        return true;    }};

2.调用验证方法

   
     
    
         
     登录账号         
     
             
               
     
     
    
     
    
         
     登录密码         
     
             
               
     
     
    
   
提交表单

转载地址：https://blog.csdn.net/rhx_1989/article/details/107639995 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！