关于layui的前端数据验证

最新推荐文章于 2025-07-29 10:30:17 发布
原创 最新推荐文章于 2025-07-29 10:30:17 发布 · 642 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#layui #jquery #ajax

这是一个关于使用layui前端框架进行表单验证和提交的示例代码。代码包括了对不同类型的输入数据（如标题、满减额、优惠额、折扣等）的验证规则，并在提交时展示表单数据。同时，代码还通过AJAX动态加载了类型选择的下拉选项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 代码有点长，这段代码主要是在学习中layui的前端验证。初学者的代码如果有错误可以私聊我。如果觉得代码长可以看第二段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui-v2.6.8/layui/css/layui.css">
    <script src="/static/layui-v2.6.8/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block" style="width: 500px;">
            <select name="type" lay-verify="type">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title"  lay-verify="title"  autocomplete="off"
                   class="layui-input title">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="desct"  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="money_off"  lay-verify="money_off" autocomplete="off"
                   class="layui-input money_off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠额</label>
        <div class="layui-input-block">
            <input type="text" name="subtract" lay-verify="subtract" autocomplete="off"
                   class="layui-input subtract">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">折扣</label>
        <div class="layui-input-block">
            <input type="text" name="discount" lay-verify="discount" autocomplete="off"
                   class="layui-input discount">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        form.verify({
            type:function (value){
                if(value==1){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var subtract = Number($('.subtract').val())
                    console.log(money_off)
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==2){
                    var title = $('.title').val()
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                }
                if(value==3){
                    var title = $('.title').val()
                    var subtract = Number($('.subtract').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==4){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                }
            }
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>
<script>
    $.ajax({
        url: "{:url('admin/Type/index')}"
        , type: "GET"
        , success: function (res) {
            console.log(res)
            var data = res.data
            var str = '<option value="">请选择</option>';
            $(data).each(function (k, v) {
                str += '<option value="' + v.id + '">' + v.t_name + '</option>'
            })
            console.log(str)
            $('select').append(str)
            layui.form.render("select");
        }
    })

</script>

关键性代码如下

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block" style="width: 500px;">
            <select name="type" lay-verify="type">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
            <input type="text" name="title"  lay-verify="title"  autocomplete="off"
                   class="layui-input title">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="desct"  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="money_off"  lay-verify="money_off" autocomplete="off"
                   class="layui-input money_off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠额</label>
        <div class="layui-input-block">
            <input type="text" name="subtract" lay-verify="subtract" autocomplete="off"
                   class="layui-input subtract">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">折扣</label>
        <div class="layui-input-block">
            <input type="text" name="discount" lay-verify="discount" autocomplete="off"
                   class="layui-input discount">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        form.verify({
            type:function (value){
                if(value==1){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var subtract = Number($('.subtract').val())
                    console.log(money_off)
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==2){
                    var title = $('.title').val()
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                }
                if(value==3){
                    var title = $('.title').val()
                    var subtract = Number($('.subtract').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==4){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                }
            }
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>

主要的代码实现如下

//表单中的lay-verify="type"属性必须有
//下面这段代码主要是对值进行判断。
 layui.use('form', function () {
        var form = layui.form;
        form.verify({
            type:function (value){
                if(value==1){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var subtract = Number($('.subtract').val())
                    console.log(money_off)
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==2){
                    var title = $('.title').val()
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                }
                if(value==3){
                    var title = $('.title').val()
                    var subtract = Number($('.subtract').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(subtract==0){
                        return '优惠额不能为空';
                    }
                    if(String(subtract)=='NaN'){
                        return '优惠额必须为整数或者小数';
                    }
                }
                if(value==4){
                    var title = $('.title').val()
                    var money_off = Number($('.money_off').val())
                    var discount = Number($('.discount').val())
                    if(title.length==0){
                        return '标题不能为空';
                    }
                    if(money_off==0){
                        return '满减额不能为空';
                    }
                    if(discount==0){
                        return '折扣不能为空';
                    }
                    if(String(money_off)=='NaN'){
                        return '满减额必须为整数或者小数';
                    }
                    if(String(discount)=='NaN'){
                        return '折扣必须为整数或者小数';
                    }
                }
            }
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });
//下面这段为提交代码。如果使用请参考文章第一段代码
form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });

lanjinghexuan
关注
layui表单验证
11-01
个人总结的有关layui中对页面的一些验证，省份正，邮箱等
layui前端框架（EasyWeb后台开发框架）
12-28
对于Java开发者，layui还有一款基于Spring Boot的后台管理系统模板——LAYUIAdmin，它集成了layui前端框架和Shiro安全框架，快速构建后台管理系统的页面结构和基础功能。开发者可以根据自身需求进行二次开发，快速...
layui前端表单验证（身份证,手机号 图形验证码等）
array_sum的博客
06-06 8757
文章目录前言一、layui前端验证二、使用步骤1.以下介绍几个常用的前端验证2.读入数据总结 前言 layui前端框架是一款比较流行的前端框架，多模块集成的UI框架 组件丰富且轻盈 一、layui前端验证 layui的前端验证的比较多样化，不仅仅有自带的一些基础验证，还可以使用一些自定义验证规则 就比如正则匹配 同样可以支持 二、使用步骤 1.以下介绍几个常用的前端验证 代码如下： <!DOCTYPE html> <html lang="en"> <head>
使用layui+thymeleaf前端表单验证
这不是你的确定 的博客
04-20 1008
废话不多，直接上代码 html页面代码： <div class="register-container"> <div class="register-banner"> <img src="/img/logo.png"/> </div> <label class="error...
layui阻止表单提交的一个问题
热门推荐
乖乖康少
10-23 1万+
最近使用layui的时候，想阻止表单提交， form.on('submit(*)', function(data){         console.log(data.elem)                                 //被执行事件的元素DOM对象，一般为button对象         console.log(data.form)                 ...
Layui前台表单校验
weixin_30481087的博客
03-26 368
官方文档对表单检验的说明 http://www.layui.com/doc/modules/form.html#verify 　　具体使用步骤： 导入相应的layui.css和layui.js的包 在js中申明form layui.use(['form'], function(){ var form = layui.form； } 然后在...
Layui前端框架2.6.6
01-13
“jb51.net.txt”可能是关于Layui教程或技术文章的链接，这类资源通常包含详细的使用指南和示例代码，帮助开发者更好地理解和使用Layui。“脚本之家.url”和“服务器软件.url”可能是指向相关技术社区或服务器软件的...
layui插件表单验证提交触发提交的例子
10-16
Layui是一个前端UI框架，它提供了一套简单易用的界面元素和交互功能，让开发者可以快速构建出美观的页面。Layui的组件以模块化的方式组织，支持插件扩展，使得功能更加丰富。在文章中，我们主要用到了其中的表单验证...
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
10-16
在当今的Web开发中，前后端的交互和数据验证是构建稳定应用的重要环节。本篇文档将围绕如何利用layui框架实现自定义验证，特别是在表单提交之前通过ajax异步查询后端数据，确保没有重复数据。这不仅确保了数据的唯一...
layui的表单验证支持ajax判断用户名是否重复的实例
10-16
本文将通过实例展示如何利用layui前端框架结合ajax技术实现表单验证中用户名的唯一性检查。 ### 了解layui表单验证 layui是一款前端UI框架，提供了一套简单的表单验证机制。通过给输入框添加特定的lay-verify属性...
layui lay-verify form表单自定义验证规则详解
12-13
官方文档详见：https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html： <input type="text" lay-verify="digital" placeholder="请输入数字"> <button type="button" class="layui-btn layui-btn-norma" lay-submit lay-filter="submit_button">提交</button>
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
10-16
今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 验证小数点唯一正则表达
魔道祖师 魏家仙
03-07 1139
layui 验证小数点唯一正则表达 我在网上找了一大圈 表单验证小数点唯一正确性 <div class="col-sm-10"> <input type="number" step="0.01" min="0" name="cost" lay-verify="required|amount" placeholder="必填：商品价值" class="col-xs-10 col-sm-6 layui-input" required /&gt
ssm+layui框架判断文本框内容和数据库的内容是否重复相同
weixin_42376161的博客
04-10 1078
ssm+layui框架判断文本框内容和数据库的内容是否重复相同 思路：把页面的文本框值传到后台判断，在map.xml中增加一个方法，通过某某值查询一整条数据，[注意:mapper加上声明]例如下图： 然后在service层进行判断： if (userMapper.getUserByName(user.getName()) != null) { return "一个字符串"; } 传到前端页面进...
使用layui前端框架注意事项（对数据进行CRUD操作）
LIHUI_A的博客
07-17 680
使用layui前端框架注意事项（对数据进行CRUD操作） 导入相应的依赖包，初始化layui容器 <script> //一般直接写在一个js文件中,使用时加载相应的模块即可， //值得注意的是若你已经导入了引入好layer.js后，可以不用再容器中去加载layer模块。 layui.use(['layer', 'form', 'table'], function () { //加载模块 var form = layui.form;
使用layui分页显示时遇到 查询出来的数据与显示数据不一致的问题
weixin_44541247的博客
04-08 5208
使用layui分页时有时候可能会遇到查询出来的数据与显示的数据不一致的问题 以显示公告为例： 由上图可以发现查询出来的数据一共十二条但显示出来的只有三条， 在查询数据正确的情况如果出现这种情况是因为在提取数据时用错了分页开始的序号， 使用到了分页结束的序号。 我们在使用layui时请求返回封装的数据时定义的分页开始序号的方法是GetStartIndex 正常情况下应该是使用这个来返回每一页显示...
layui form 自定义校验，不通过form还是会提交的问题
qq_35238963的博客
11-18 5051
layui一个不错的前端框架，上手较快不过，不过官网文档有些还是不全面，废话不多说，直接入题。 写了一个form但是要校验用户名的唯一性，所以使用了layui的自定义校验，代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...
layui 自定义校验整数，分数，电话等内容
凉梦的博客
04-09 633
1，页面用法：lay-verify=“validateInteger” ，而validateInteger 在js里面定义。layui在使用中，内置的条件判断不足以满足我们使用的情景，这时候需要我们自己写一些校验。2，定义validateInteger以及其他内容。
掌握Layui.$：轻量级jQuery核心解析
最新发布
bemyrunningdog
07-29 440
本文解析了Layui框架中layui.$的核心作用与使用方法。layui.$是Layui封装的轻量级jQuery（约30KB），主要作用包括获取jQuery对象、避免全局污染和确保模块加载顺序。必须在layui.use()回调函数内使用，支持DOM操作、事件绑定等基础功能，但与完整jQuery相比缺少动画库和插件支持。文章提供了常见问题解决方案，如"$未定义"错误处理、与完整jQuery共存的方法，并推荐了最佳实践：统一获取方式、防冲突处理和按需加载。最后总结了layui.$的模块化集成
layui前端日历模板实现
layui是一个采用自身模块规范编写的前端UI框架，它包含了丰富的界面元素和功能组件，如按钮、表格、弹窗、导航、表单验证等，非常适合快速开发Web界面。这个特定的日历模板，很可能是基于layui框架中已有的日历组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值