简单总结Layui中的表单验证

知识分子没文化
2021-04-18 / 0 评论 / 249 阅读 / 正在检测是否收录...

目录:

简单来说,实现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>
0

评论 (0)

取消