layui表单验证

//校验
form.verify({
    pass: [
        /^[\S]{2,32}$/
        , '长度应为2到32位字符'
    ],
    illegal: function(value, item){ //value:表单的值、item:表单的DOM对象
        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
            return '不能有特殊字符';
        }
    },
    not_required : function(value, item){
        if(value==''){
            return '';
        } else{
            if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                return '不能有特殊字符';
            }
        }
    },
    repassword: function(value, item){ //value:表单的值、item:表单的DOM对象
        var password=$("#password").val();
        var repassword=$("#repassword").val();
        if(password!=repassword){
            return '密码与确认密码不相同';
        }
    }

});

原文链接:http://blog.maptoface.com/post/170 

### 调整 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
发出的红包

打赏作者

全职计算机毕业设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值