layui自定义验证

自带验证

lay-verify

required(必填项)
phone(手机号)
email(邮箱)
url(网址)
number(数字)
date(日期)
identity(身份证)
自定义值    

自定义验证规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <h1>hello world</h1>

        <form class="layui-form">
            <div class="layui-form-item">
                <input type="text"
                       name="name"
                       class="layui-input"
                       placeholder="请输入名称"
                       required
                       lay-verify="required">
            </div>

            <div class="layui-form-item">
                <input type="text"
                       name="age"
                       class="layui-input"
                       placeholder="请输入年龄"
                       required
                       lay-verify="required|number">
            </div>

            <!--使用自定义验证-->
            <div class="layui-form-item">
                <input type="text"
                       name="data"
                       class="layui-input"
                       placeholder="请输入大于5的数字"
                       required
                       lay-verify="required|number|data_field">
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="test_form">提交</button>
            </div>
        </form>

    </div>
<script src="layui/layui.all.js"></script>
<script>
    var layer, form;
    layui.use(['layer', 'form'], ()=>{
        layer = layui.layer;
        form = layui.form;

        // 自定义验证
        form.verify({
            data_field: function(value, item){ //value:表单的值、item:表单的DOM对象
                if(value < 5){
                    return '数字不能小于5'
                }
            }
        });

        // 提交表单
        form.on('submit(test_form)', (data)=>{
            layer.msg(JSON.stringify(data));
            return false;
        })
    });
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容