layui前端表单验证（身份证,手机号图形验证码等）

最新推荐文章于 2024-06-24 10:22:04 发布

array_sum

最新推荐文章于 2024-06-24 10:22:04 发布

阅读量8.2k

点赞数 30

分类专栏：随笔文章标签： layui html5 thinkphp

本文链接：https://blog.csdn.net/array_sum/article/details/117608907

版权

随笔专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用layui前端框架进行表单验证，包括基础验证和自定义规则，并展示了ThinkPHP后台的验证方法，确保数据安全。同时，提供了完整的HTML和JavaScript代码示例，帮助开发者理解并实现前端和后端的验证流程。

摘要由CSDN通过智能技术生成

前言

layui前端框架是一款比较流行的前端框架，多模块集成的UI框架它的组件丰富且轻盈，所以前端验证也是必不可少的

一、layui前端验证

layui的前端验证的比较多样化，不仅仅有自带的一些基础验证，还可以使用一些自定义验证规则就比如正则匹配同样可以支持

二、使用步骤

1.以下介绍几个常用的前端验证

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开户注册</title>
</head>
<link rel="stylesheet" href="/layui/css/layui.css"  media="all">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    #captcha{
        float: left;
    }
    #code{
        float: left;
    }
    #text{
        line-height:20px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>开户注册</legend>
</fieldset>

<form class="layui-form" action="save" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">开户银行</label>
        <div class="layui-input-block">
            <input type="text" name="bank" lay-verify="required|bank" autocomplete="off" placeholder="请输入银行" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开户账号</label>
        <div class="layui-input-block">
            <input type="text" name="accout" lay-verify="required|number" autocomplete="off" placeholder="请输入账号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required|name" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号码</label>
        <div class="layui-input-block">
            <input type="text" name="idcard" lay-verify="required|identity" placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <br>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图形验证码</label>
            <div class="layui-input-inline">
                <input type="tel"  name="captcha" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
            </div>
            <span><div id="captcha">{:captcha_img()}</div></span><span id="text"><a href="">看不清楚！点击图片换一张？</a></span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="tel" id="phone" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
            <input type="button" id="btn" value="免费获取验证码" class="layui-btn" onclick="settime(this)" />
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">短信验证码</label>
            <div class="layui-input-inline">
                <input type="tel" id="code" name="code" lay-verify="required|code" placeholder="请输入接收的验证码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <br><br>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="save" >立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
<script src="/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '银行名称至少得5个字';
                }
            },
            accout: function(value){
                if(value.length < 5){
                    return '账户至少得5个字符啊';
                }
            },
            code: function(value){
                if(value.length < 3){
                    return '验证码格式不正确';
                }
            },
            name: function(value) {
                if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
                    return '姓名只能是中文';
                }
            },
            bank: function(value) {
                if(!new RegExp("^[\u4e00-\u9fa5\]+$").test(value)){
                    return '银行只能是中文';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });
    });

</script>
<script type="text/javascript">
    var countdown=60;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="免费获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
            setTimeout(function() {
                settime(val)
            },1000)
        }
    }
    layui.use('layer', function(){
        var layer = layui.layer;
        $(function (){
            //获取手机号 发送验证码
            $('#btn').click(function (){
                let phone=$('#phone').val();
                $.post('http://www.day8.com/demo/api/send',{phone:phone},function (res){
                    console.log(res.msg)
                    if (res.code==200){
                        layer.msg(res.msg);
                        alert(res.msg)
                    }

                })
            })
        })
    });

</script>

2.thinkphp后台验证

    /**
     * 保存新建的资源
     *
     * @param  \think\Request  $request
     * @return \think\Response
     */
    public function save(Request $request)
    {
        $data=$request->param();

        $validate = \think\facade\Validate::rule([
            'phone|手机号'  => 'require|mobile',
            'captcha|验证码'=>'require|captcha',
            'name|真实姓名'=>'require|chs',
            'bank|银行名称'=>'require|chs',
            'code|短信验证码'=>'require|alphaDash',
            'idcard|身份证'=>'require|idCard',
        ]);
        //验证参数
        if (!$validate->check($data)) {
            die($validate->getError());
        }
    }

3.效果展示

在这里插入图片描述希望此文章对你有所帮助

array_sum

关注

30
点赞
踩
45

收藏

觉得还不错? 一键收藏
1
评论
layui前端表单验证（身份证,手机号图形验证码等）

文章目录前言一、layui前端验证二、使用步骤1.以下介绍几个常用的前端验证2.读入数据总结前言layui前端框架是一款比较流行的前端框架，多模块集成的UI框架组件丰富且轻盈一、layui前端验证layui的前端验证的比较多样化，不仅仅有自带的一些基础验证，还可以使用一些自定义验证规则就比如正则匹配同样可以支持二、使用步骤1.以下介绍几个常用的前端验证代码如下：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫