Layui手动验证表单必填项

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.调用验证方法

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！