master

分支 (1)

标签 (1)

管理

管理

master

1.0.0

be-valid
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <style>
        .layui-row {
            margin: 20px;
        }
    </style>
    <!-- 引入 layui.css -->
    <link href="./layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form">
    <div class="layui-row">
        <div class="layui-col-md2">
            <label class="layui-form-label">身份证号码</label>
        </div>
        <div class="layui-col-md4">
            <input id="username" type="text" name="username" lay-verify="required|iDCard" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-col-md2">
            <label class="layui-form-label">社会信用代码</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|creditCode" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <label class="layui-form-label">邮箱</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-col-md2">
            <label class="layui-form-label">手机号</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|mobilePhone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <label class="layui-form-label">座机号</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-col-md2">
            <label class="layui-form-label">网址</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|url" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <label class="layui-form-label">数字</label>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="username" lay-verify="required|number" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-row">
        <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
    </div>
</form>
<!-- 引入 layui.js -->
<script src="./layui/layui.js"></script>
<script src="./be-validation/validation.js"></script>
<script>
    layui.use(['form', 'beValid', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let beValid = layui.beValid;

        beValid.verify();//{}中可自定义,参考leyui自定义规则


        // 提交事件
        form.on('submit(demo1)', function (data) {
            let field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            return false; // 阻止默认 form 跳转
        });

    });
</script>
</body>
</html>