Layui手动验证表单必填项
发布日期:2021-07-27 12:52:44
浏览次数:3
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月07日 23时47分17秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
JPA 默认值配置
2019-04-25
myeclipse 的 maven工程报错或pom.xml头报错解决办法
2019-04-25
反向Ajax,第2部分:WebSocket
2019-04-25
反向Ajax,第1部分:Comet介绍
2019-04-25
反向Ajax,第3部分:Web服务器和Socket.IO
2019-04-25
反向Ajax,第4部分:Atmosphere和CometD
2019-04-25
反向Ajax,第5部分:事件驱动的Web开发
2019-04-25
Servlet3.0新特性&动态代理
2019-04-25
servlet3 实现请求异步处理
2019-04-25
java线程管理利器:java.util.current的用法举例
2019-04-25
native2ascii.exe的使用
2019-04-25
docker-machine的安装
2019-04-25
用docker-machine创建虚拟主机
2019-04-25
spring mvc 4 + swagger2
2019-04-25
Jenkins之持续构建
2019-04-25
sonarqube 启动不了,异常提示:远程主机强迫关闭了一个现有的连接。
2019-04-25
jenkins 参数化构建作业
2019-04-25
容器div内容超出后,自动出现滚动条
2019-04-25
RDLC报表相关
2019-04-25