前端笔记网页前端后台技巧(CSS+HTML)

layui中使用lay-verify进行非必填项校验

2019-11-29  本文已影响0人  菜菜___

使用layui时验证数字类型,lay-verify=“number”,发现如果不输入数据也会认为数据不合法,所有的校验规则,默认都是必填项,但对于非必填项来说是填了才去校验,因此修改了form.js的源码(layui.all.js也有这些校验规则,目前只修改form.js发现生效就没有修改layui.all.js)

修改如下:

在所有的正则表达式前面加:(^$)|

number类型由 !e || isNaN(e) 修改为 e && isNaN(e) 表示不为空并且不是数字

新加整数类型规则:integer: [/^\d*$/, "只能填写整数"],

verify: {
                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 (e) {
                    if (e && isNaN(e))return "只能填写数字"
                },
                integer: [/^\d*$/, "只能填写整数"],
                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)$)/, "请输入正确的身份证号"]
            }

如果该选项为必填:建议使用,lay-verify=“required|number”校验,其中required是校验必填,多种校验规则之间用 | 间隔。

原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

上一篇下一篇

猜你喜欢

热点阅读