美文网首页前端笔记网页前端后台技巧(CSS+HTML)
layui中使用lay-verify进行非必填项校验

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

作者: 菜菜___ | 来源:发表于2019-11-29 12:49 被阅读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

相关文章

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

    使用layui时验证数字类型,lay-verify=“number”,发现如果不输入数据也会认为数据不合法,所有的...

  • layui表单校验失效

    layui中使用lay-verify进行表单项的校验,但是点击提交按钮无效,仔细搜索资料发现这个校验要满足两个条件...

  • 最全面的测试用例

    一、 文本框为字符型 必填项非空校验 1、 必填项未输入--程序应提示错误; 2、 必填项只输入若干个空格, 未输...

  • 最全面的测试用例

    一、文本框为字符型 必填项非空校验: 1、必填项未输入--程序应提示错误; 2、必填项只输入若干个空格,未输入其它...

  • 编码优秀实践

    1、数据校验 使用dto前端校验的时候,新增和修改要校验的不一样,新增有必填项校验,修改往往需要校验长度就可。此时...

  • 13,layer触发事件 以及弹出编内框,以及 select

    html js 为空的校验lay-verify="required"

  • excel导入的必填字段

    对必填字段的sql参数使用trim()函数,如果参数为空则导入报错对非必填字段先使用empty()进行判断,非空时...

  • element ui使用v-for循环form表单校验的实现

    问题描述 在项目开发中,我们经常会遇到表单保存的功能,在表单保存前,常常需要做表单必填项的校验,校验通过以后才去发...

  • angular表单校验

    最近在写项目的时候,产品要求对表单的必填输入项进行友好的校验提示,效果如图: " 这个需求很简单,怎么实现我不管。...

  • vue2.x 循环form表单项并验证必填项

    做项目时遇到一个功能:对每个商品进行评价和必填项校验。 原型如如下: 最后实现方式是: 循环每一个el-form-...

网友评论

    本文标题:layui中使用lay-verify进行非必填项校验

    本文链接:https://www.haomeiwen.com/subject/ccywwctx.html