简单总结Layui中的表单验证

目录：

一、校验规则
- 1.使用内置校验规则
- 2.自定义校验规则
二、示例文件的实现代码

简单来说，实现Layui框架中的表单验证很简单，只需要给表单元素添加上”lay-verify“属性

示例如下：

一、校验规则

1.使用内置校验规则

Layui对于常见的字符串（如手机号，邮箱，网址等）都设置了相应的校验规则，不用再自己写规则，使用时只需要将校验规则赋值给“lay-verify”属性即可。

Layui中内置的校验规则如下：

规则	说明
required	必填项
phone	手机号
email	邮箱
url	网址
number	数字
date	日期
identity	身份证

例如：设置一个输入框对手机号码进行校验：

<!-- 也可以支持多条校验规则同时使用，用“|”隔开 -->
手机号：<input type="text" placeholder="请输入手机号" lay-verify="required|phone">
<button lay-submit>提交</button>

2.自定义校验规则

当然，在大部分时候，Layui中内置的校验规则还是有点不够用，所以我们还是需要来自定义规则来校验表单数据。

用一个实例来简单说明：

<!-- username为自定义的规则 -->
用户名：<input type="text" placeholder="请输入用户名" lay-verify="username">

<script>
    // 用户名长度不能大于16位
    layui.form.verify({
        // value：表单的值、item：表单的DOM对象
        username:function(value,item){
            if (value.length > 16){
                return "用户名大于16位";
            }
        }
    })
</script>

这个例子较为简单，只涉及到表单数据的长度判断，若要设置更复杂的规则还需要用到正则表达式，鉴于篇幅长度本篇博客不再赘述。相关的教程可以参考：JavaScript 正则表达式、JavaScript RegExp 对象

二、示例文件的实现代码

提前导入Layui和jQuery的CDN文件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.4/css/layui.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>

1.HTML代码

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend id="title">简单总结Layui中的表单验证</legend><br>
</fieldset>
<div class="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>内置的校验规则</legend>
    </fieldset>
    <div class=" layui-collapse" lay-accordion>
        <!-- 必填项 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">必填项校验</p>
            <!-- layui-show来决定是否默认展开 -->
            <div class="layui-form-item layui-colla-content layui-show">
                <label class="layui-form-label">必填项：</label>
                <div class="layui-input-inline">
                    <!-- lay-verify 属性定义校验规则 -->
                    <input type="text" class="layui-input" placeholder="请输入必填项" lay-verify="required">
                </div>
                <div class="layui-form-mid layui-word-aux">此项为必填项</div>
                <button id="btn-required" class="layui-btn layui-btn-sm" lay-submit>校验</button>
            </div>
        </div>

        <!-- 手机号校验 -->
        <div class="layui-form  layui-colla-item">
            <p class="layui-colla-title">手机号校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入正确格式的手机号码" lay-verify="phone">
                </div>
                <div class="layui-form-mid layui-word-aux">1开头的11位数字</div>
                <button id="btn-phone" class="layui-btn layui-btn-sm" lay-submit>校验手机号</button>
            </div>
        </div>


        <!-- 邮箱 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">邮箱校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入正确格式的邮箱" lay-verify="email">
                </div>
                <div class="layui-form-mid layui-word-aux">正确的邮箱格式</div>
                <button id="btn-email" class="layui-btn layui-btn-sm" lay-submit>校验邮箱</button>
            </div>
        </div>


        <!-- 网址 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">网址校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">网址：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入网址" lay-verify="url">
                </div>
                <div class="layui-form-mid layui-word-aux">http(s)://开头</div>
                <button id="btn-url" class="layui-btn layui-btn-sm" lay-submit>校验网址</button>
            </div>
        </div>

        <!-- 数字 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">数字校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">数字：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入数字" lay-verify="number">
                </div>
                <div class="layui-form-mid layui-word-aux">数字</div>
                <button id="btn-number" class="layui-btn layui-btn-sm" lay-submit>校验数字</button>
            </div>
        </div>

        <!-- 日期 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">日期校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">日期：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入日期" lay-verify="date">
                </div>
                <div class="layui-form-mid layui-word-aux">格式：年（YYYY）-月（MM）-日（DD）</div>
                <button id="btn-date" class="layui-btn layui-btn-sm" lay-submit>校验日期</button>
            </div>
        </div>

        <!-- 身份证 -->
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">身份证号校验</p>
            <div class="layui-form-item layui-colla-content">
                <label class="layui-form-label">身份证号：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" placeholder="请输入身份证号" lay-verify="identity">
                </div>
                <div class="layui-form-mid layui-word-aux">正确的身份证号码</div>
                <button id="btn-identity" class="layui-btn layui-btn-sm" lay-submit>校验身份证号</button>
            </div>
        </div>
    </div>
</div>
<br><br>

<div class="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>自定义校验规则</legend>
    </fieldset>
    <!--    自定义规则-->
    <div class="layui-form layui-collapse" lay-accordion>
        <div class="layui-form layui-colla-item">
            <p class="layui-colla-title">自定义规则</p>
            <div class="layui-form-item layui-colla-content layui-show">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" placeholder="请输入密码" lay-verify="password">
                </div>
                <div class="layui-form-mid layui-word-aux">至少八位数字与字母的组合</div>
                <button id="btn-custom" class="layui-btn layui-btn-sm" lay-submit>校验</button>
            </div>
        </div>
    </div>
</div>

2.CSS代码

<style>
    #title {
        text-align: center;
        margin: 20px;
    }

    .container {
        width: 800px;
        margin: 20px auto;
    }

    button {
        margin: 5px;
        float: right;
    }
</style>

3.JS代码

<script>
// 注意：自 layui 2.6.0 开始，无需再单独加载指定模块，因为 layui.js 已经包含了所有的内置模块，无需再指定模块
    $("#btn-required").click(function () {
        layer.msg("必填项已填写",
            {
                icon: 6
                , time: 1000
            })
    });

    $("#btn-phone").click(function () {
        layer.msg("手机号码格式正确",
            {
                icon: 6
                , time: 1000
            });
    });

    $("#btn-email").click(function () {
        layer.msg("邮箱格式正确",
            {
                icon: 6
                , time: 1000
            });
    })

    $("#btn-url").click(function () {
        layer.msg("网址格式正确",
            {
                icon: 6
                , time: 1000
            });
    });

    $("#btn-number").click(function () {
        layer.msg("填写的值为数字",
            {
                icon: 6
                , time: 1000
            });
    });

    $("#btn-date").click(function () {
        layer.msg("日期格式正确",
            {
                icon: 6
                , time: 1000
            });
    });

    $("#btn-identity").click(function () {
        layer.msg("身份证格式正确",
            {
                icon: 6
                , time: 1000
            });
    });

    $("#btn-custom").click(function () {
        layer.msg("密码格式正确", {
            icon: 6
            , time: 1000
        });
    });

    // 引入layui的form模块，自定义校验规则
    layui.form.verify({
        //value：表单的值、item：表单的DOM对象
        password: function (value,item) {
            if (/[\u4e00-\u9fa5]+$/.test(value)) {
                return "密码不能出现汉字噢";
            }
            if (value.length < 8) {
                return "密码小于8位";
            }
        }
    })
</script>

一、校验规则

1.使用内置校验规则

2.自定义校验规则

二、示例文件的实现代码

1.HTML代码

2.CSS代码

3.JS代码

【代码摘录】HTML+CSS实现下拉菜单

总结一下CSS3中的Flex布局语法

简单总结CSS中元素形状的平滑变化

Bootstrap框架实现简易的模态框

评论 (0)