LayUI表单验证确认密码验证 2019年4月10日
【HTML】JavaScript
views: 592

既然你都搜到这来了，那肯定国内都没有找到这个问题的详解。

下面是一个简单的form

<form class="layui-form">
<div class="row">
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" id="passwd" lay-verify="password" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" lay-verify="repassword" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
</div>
</form>

 

lay-verify=”required”大家肯定用得比较多，意思是验证必须输入。

那现在有个需求：

  1. 确认密码与密码一致；
  2. 密码需要6-20位；

我们可以使用layui其丰富的组件思想，使用layui.use(‘form’, function(){ xxx })。

详细JS如下：

/**
 * 表单监听form
 */
layui.use('form', function(){
    form = layui.form;
    //表单验证
    form.verify({
        password: [/(.+){6,20}$/, '密码必须6到12位'],
        repassword: function(value){
            var repassvalue = $('#passwd').val();
            if(value != repassvalue){
                return '两次输入的密码不一致!';
            }
        }
    });
})

即可以在表达提交的时候，自动会去先行执行form.verify里面的自定义验证规则：

  • password: [xxx] 当HTML元素中使用了lay-verify=”password”时触发 [/(.+){6,20}$/, ‘密码必须6到12位’]，正则匹配内容，若失败则将第二个参数的文本输出。
  • repassword: function(value){} 当HTML元素中使用了lay-verify=”repassword”时触发，此处手动用JQ的选择器（也可原生JS选择器）取到password的值，而确认密码的值因为当前作用域在当前<input>元素上，即value变量的值是input的value属性，之后就可以比较密码与确认密码了。同样，return出去的参数可以使失败后的文本输出。

另一种通用性比较强的做法：

<div class="row">
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="edit_password" name="password" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" data-check="edit_password" name="password" lay-verify="required|checkRepeat" placeholder="" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

 

//自定义验证规则
form.verify({
    checkRepeat: function(value, dom) {
        var password = $('#' + $(dom).data('check')).val();
        if (value !== password) {
            return '两次输入不一致';
        }
    }
});
  • checkRepeat: function(value, dom){} 当HTML元素中使用了lay-verify=”checkRepeat”时触发，这里在确认密码的input元素内加入data-check=”密码框的ID”，这样所以更改“框的ID”，通用性比较好