layui自定义表单验证无效

layui自定义表单验证无效
官方文档链接:https://layui.gitee.io/v2/docs/modules/form.html#verify

  1. 自定义表单验证,需要form模块,需要引入layui.all.js文件(注意:该引入要放在自定义js文件前面),如:<script src="./lib/layui/layui.all.js"></script> <script src="./js/login.js"></script>

  2. 需验证的input标签,需要在<form></form>标签内,并且,父元素中具有layui-form,如:<form class="layui-form">

  3. 需要使用layui中的提交属性,确保提交按钮具有:lay-submit(可直接从官方文档复制),例:<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">注册</button>

  4. 注意多个自定义验证时,换行逗号的位置,逗号不能在末尾,会导致:验证无效,并且浏览器不报错在这里插入图片描述

  5. 如下代码中:lay-verify="required | pwd"requiredpwd之间是管道符号|
    (1)pwd是自定义验证,
    (2)不是空格,如错误代码lay-verify="required pwd,会导致:自定义验证无效,并且浏览器不报错

<input 
    type="text" 
    name="password" 
    required  
    lay-verify="required|pwd"
    placeholder="请输入密码" 
    autocomplete="off" 
    class="layui-input">

完整代码参考:
例:注册页面,输入密码自定义验证为6至12个数字
html文件中

    <form class="layui-form" action="">
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-username"></i>   

                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                  
                </div>
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-password"></i>   
                    <input type="text" name="password" required  lay-verify="required|pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
                  
                </div>
                <div class="layui-form-item">
                    <i class="layui-icon layui-icon-password"></i>   
                    <input type="text" name="repassword" required  lay-verify=" required pwd" placeholder="再次确认密码" autocomplete="off" class="layui-input">
                  
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo">注册</button>
                </div>
                <a href="javascript:;" id="login">去登录</a>

            </form>

js文件中(使用了jqurey)

$(function{
// 自定义表单验证
    var form =layui.form
    form.verify({
        pwd:[/^[\S]{6,12}$/, '密码必须6到12位,且不能出现空格']
    })
   })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值