layui表单验证范例

这篇博客详细介绍了如何在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;
        });
    });


### 调整 Layui 表单验证提示信息位置的方法 Layui表单验证机制默认会在输入框下方显示错误提示信息,如果需要调整提示信息的位置(如右侧或其他自定义位置),可以通过以下几种方式进行实现。 #### 方法一:通过 CSS 修改提示框样式 可以使用自定义的 CSS 样式来覆盖 Layui 默认的校验提示框样式。具体操作如下: ```css /* 定义新的提示框样式 */ .layui-form-danger { position: absolute; top: 0; /* 设置垂直方向上的偏移量 */ right: -150px; /* 将提示框移动到右侧 */ } ``` 将上述代码加入项目的全局样式文件中即可生效[^5]。此方法适用于简单的布局需求,但如果页面结构复杂可能会影响其他组件的表现。 #### 方法二:重写 Layui 验证逻辑并动态设置提示位置 对于更复杂的场景,可以直接修改 Layui 的源码或者扩展其行为,在触发验证时手动指定提示消息的具体展示位置。例如: ```javascript layui.use(['form'], function() { var form = layui.form; // 自定义验证规则 form.verify({ testCustomRule: function(value, item) { //value:表单的值,item:表单的DOM对象 if (!/^[a-zA-Z]+$/.test(value)) { $(item).siblings('.layui-form-mid').remove(); // 清除旧的消息 $('<div class="layui-form-mid layui-word-aux" style="position:absolute;right:-100px;">仅允许字母</div>') .insertAfter(item); // 插入新消息至特定位置 return '验证未通过'; // 返回字符串即代表验证失败 } } }); // 绑定提交事件 document.querySelector('#submitBtn').addEventListener('click', function(e){ e.preventDefault(); if (form.checkForm('#exampleForm')) { console.log('表单已成功验证'); } else { console.warn('表单验证失败'); } }); }); ``` 以上脚本不仅实现了对字段内容的有效性判断,还能够灵活控制错误提示文字的实际摆放地点[^3]^。 #### 方法三:完全替换内置提示机制 当项目中有大量类似的定制化需求时,考虑重构整个反馈流程可能是更好的选择。这通常涉及深入理解框架内部工作原理以及编写更加通用化的解决方案。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值