layui的表单——自定义验证规则

不想吃菠萝

已于 2023-05-19 11:38:24 修改

阅读量2.8k

点赞数 5

分类专栏： layui 文章标签： html5 layui

于 2021-05-08 11:24:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49582736/article/details/116521112

版权

layui 专栏收录该内容

1 篇文章

订阅专栏

最近layui的表单用的比较多，所以整理来一下自定义的验证如下（下面是自己写的例子）：

layui的官网

引入layui之后
html

<form action="" class="layui-form">
	  <!-- 表单 -->
	  <div class="login_from data_felx flex-diry">
	      <div class="span flex-bet data_felx">
	          <span>Email address</span>
	      </div>
	      <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
	  </div>
	  <!-- 表单 -->
	  <div class="login_from data_felx flex-diry">
	      <div class="span flex-align flex-bet">
	          <span>Password</span>
	          <span>Forgot password?</span>
	      </div>
	      <input type="text" name="title" lay-verify="pass" autocomplete="off" class="layui-input">
	  </div>
	  <!-- 按钮 -->
	  <button class="layui-btn login_button" lay-submit lay-filter="formDemo">SIGN IN</button>
</form>

script 两种方式都可以

layui.use(['jquery', 'form', 'layer'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 1) {
                        return '必须填写字段';
                    }
                    if (!new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$").test(value)) {
                        return '请填写正确的电子邮件地址';
                    }
                },
                 pass: function (value) {
                    if (value.length < 1) {
                        return '必须填写字段';
                    }
                    if (!new RegExp("^[\S]{6,12}$").test(value)) {
                        return '请填写正确的电子邮件地址';
                    }
                }
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });
        })

数组形式

layui.use(['jquery', 'form', 'layer'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            //自定义验证规则
            form.verify({
                title: [
                    /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                    , '必须填写字段'
                ]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须是6到12位的数字，不能有空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });
        })