layui表单验证范例

最新推荐文章于 2025-06-29 09:46:05 发布

Anwous

最新推荐文章于 2025-06-29 09:46:05 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML AJAX JavaScript ThinkPHP

本文链接：https://blog.youkuaiyun.com/Anwous/article/details/80657321

ThinkPHP 同时被 3 个专栏收录

11 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

这篇博客详细介绍了如何在layui中实现表单验证，包括关键的HTML代码示例和配置过程。

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

HTML代码

<form id='formDemo' action="" method='POST' class="layui-form">
<input type="text" class="cell-input"name="type" lay-verify="type|required" placeholder="类型" autocomplete="off" />
<input type="text" class="cell-input"name="address" lay-verify="address|required" placeholder="请选择钱包地址" autocomplete="off" /> <input type="submit" class="btn-block btn-primary address_save" value="保存" lay-filter="formDemo" lay-submit/></form>

  
    layui.use('form', function(){
        var form = layui.form;
        //自定义验证规则
        form.verify({
            type: function(value){
                if(value == 0){
                    return '请选择正确种类';
                }
            }
            ,address: function(value){
                if(value.length == 0){
                    return '地址不能为空';
                }
            }
            
        });
        
        //监听提交
        form.on('submit(formDemo)', function(data){
            $.post("{:U('UserCenter/addAddressBook')}",data.field,function(res){
                layer.msg('操作成功',{time:2000},function(){
                    window.location.href = "{:U('UserCenter/AddressBook')}";
                })
            }).error(function(xhr, status, info){layer.msg('操作失败')});
            return false;
        });
    });