layui form表单验证及提交（使用自定义lay-verify）

最新推荐文章于 2022-08-17 20:35:34 发布
原创 最新推荐文章于 2022-08-17 20:35:34 发布 · 6.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

今天在做项目中遇到下面报错
报错显示

本来想使用layui自己写自定义校验，结果如上图报错
一直以为自己引用文件出错，结果发现是在正则表达式的写法上出现错误
一个小小的‘！’号导致的bug
最后发现是正则表达式前加了个‘！’号！！！

之前本来是想判断不是“…”,结果后面想了下，正则表达式本意就是如此，自己画蛇添足导致的bug。

layui自定义验证lay-verify失效问题
theonepiece的博客
05-06 2317
lay-verify验证失效 在form表单内加上class=“layui-form” 将<form class="layui-form">/form> 写为<div class="layui-form"><form class="layui-form">...</from></div> 在想要校验的标签，加上lay-verify=“required|username” 在这个属性里，加上想要的值 加粗内容可改写，layui提供自带.
使用 layui 中的 lay-verify自定义规则来验证 form表单的内容
JinKin_OldWang的博客
09-28 3691
话不多说，直接上代码。 jsp或html中的代码 注意：验证的输入框和提交按钮要在form表单中 <form class="layui-form layui-form-pane1 required-validate" rel="pagerForm" lay-filter="productGetOne" method="post" action="<c:url value='/...
layui form 自定义校验，不通过form还是会提交的问题
qq_35238963的博客
11-18 5081
layui一个不错的前端框架，上手较快不过，不过官网文档有些还是不全面，废话不多说，直接入题。 写了一个form但是要校验用户名的唯一性，所以使用了layui的自定义校验，代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...
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表单通过ajax验证不通过form表单依然会提交的问题的解决
楞次定律
07-31 1万+
使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决 功能是新增一个数据,需要验证该数据是否已经存在.通过ajax查询后台,返回验证结果. 使用layui form.verify 自定义验证规则.出现的问题是后台返回结果正常,但即使是验证不通过,表单依然会提交. 解决方法如下: HTML代码 表单其他元素使用layui预置验证规则,提交按钮使用自定义验证规则err...
Layui表单的验证
qq_39736671的博客
12-02 745
Layui表单的验证1.资源引入2.表单验证2.1关键字验证2.2自定义验证 1.资源引入 1.layui/css/layui.css 2.layui/layui.js <link rel="stylesheet" href="../layui/css/layui.css"> <script type="text/javascript" src="../layui/layui.j...
layui表单验证 && 内置自定义规则 - 使用说明
草巾冒小子的博客
01-24 3万+
关于 layui表单的验证规则、调用、自定义规则的使用经验总结： 除了 layui 本身配套的一个验证体系，还支持开发者自定义验证规则（如上表中的【自定义密码验证（代码参考下文）】），并直接嵌入到页面的js代码中。 验证表单对象 · 都有哪些？ 如何调用规则和验证？ 如下表所示： 验证表单对象 / 元素 部分重要验证规则的设定 代码调用实例（参考下文的代码实例） 其他注解说明 ...
form触发2次 layui_layui插件表单验证提交触发提交的例子
weixin_39929254的博客
02-01 412
废话不多说，大家直接看代码吧！管理系统账号：密码： 自动登录忘记密码?登录重置layui.use(['layer','upload','form'],function() {var layer = layui.layer,form = layui.form;/*** 通用表单验证*/form.verify({username:[/^([a-zA-Z0-9_\.\-])+...
layui校验不成功依然提交的问题
hantanxin的专栏
12-16 1518
//监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); //ajax提交放在这里 return false; }); 一定要把提交的代码放到监听的代码里面，问题解决！ 另外， element.on('submit...
layui自定义表单验证无效
The_Lucky_one的博客
06-11 1452
layui自定义表单验证无效
layer html表单验证,layui lay-verify form表单自定义验证规则详解
weixin_28683391的博客
06-17 594
虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。html：提交js：form.verify({//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字],digital: [/^[0-4]*$/,'请填入0-4的分数']});这样写没问题，但是form.verify放置的位置没讲清楚，还是要自己试一下。lay...
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
苗老八的博客
05-25 2531
layui的表单是我特别常用的一个功能，这次在写添加和修改界面时，也顺手将layui的表单界面放进去，想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证，没想到遇到了如题目所描述的情况。 在这里我并没有用到他自带的“立即提交”的submit按钮，而是弹出层的“确定”按钮，放代码： //“新增信息”按钮点击事件 add.addEventListener("click", function () { layer.open({ type: 1,
Layui表单自定义验证（附带根据条件改变实时改变验证条件）
qq_41812381的博客
09-09 1212
1.在input标签中加上属性lay-verify="mail"(该input必须写在form中才能生效) 2.引用Layui的Form组件 3. 自定义正则表达式，如：邮箱+非空 var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/; var required = /^[\s\S]*.*[^\s][\s\S]*$/; 4.定义触发事件：mail 对应的是...
layui中使用lay-verify进行非必填项校验（踩坑篇）
热门推荐
编码爱好者
06-23 7万+
踩坑一： 某些表单元素为非必填项，但是却需要校验输入数据的格式是否正确，使用的layui的lay-verify 进行校验，例如lay-verify=“phone”验证手机号码规则是否合法，但是这玩意有个坑，如果不输入数据也会认为数据不合法，所有的校验规则，默认都是必填项！！！！！最后在官方社区找到一个帖子目前问题已解决 解决办法：修改layui校验规则源码，目前没发现修改以后有什么问题 修改源码如...
ssm项目练习layui中form表单提交数据的方式
qq_47944580的博客
08-17 695
layui中form表单提交数据的方式
layui lay-verify form表单自定义验证规则
Teler的博客
10-25 5万+
官方文档详见：https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。 html： &lt;input type="text" lay-verify="digital" placeholder="请输入数字"&gt; ...
使用layui中的form表单提交与upload上传
lxn_1221的博客
03-29 3747
1.首先添加选择图片按钮 <div class="layui-form-item" style="width: 80%"> <label class="layui-form-label">房间图片</label> <h5 id="fileName" style="float: left;margin:0 10px; line-heigh...
layui表格弹窗修改_layui的表单提交以及验证和修改弹框的实例
weixin_30008295的博客
01-14 1134
HTML提交JSlayui.use(['jquery','form','layer'],function () {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;// 验证form.verify({newName: [/\S/,'姓名不能为空' ] ,newCard: function (value) {if(!...
Layui form 表单验证lay-verify
04-29
Layui form 表单验证的 lay-verify 属性用于指定需要验证的表单元素，并且可以设置多个验证规则。 lay-verify 属性可以设置为内置的验证规则，比如 required、phone、email 等，也可以自定义验证规则。自定义验证规则需要在表单元素上设置 data-rule 属性，并在 JavaScript 中使用 layui.form.verify 方法添加验证规则。 例如，在表单元素上设置 lay-verify="required|phone"，表示该元素需要进行必填和手机号码的验证。如果需要自定义验证规则，可以在 JavaScript 中添加如下代码： ```javascript layui.form.verify({ // 自定义规则名 myRule: function(value, item){ // 验证逻辑，value 为表单元素值，item 为当前表单元素 if (value !== 'myValue') { return '错误提示信息'; } } }); ``` 然后在表单元素上设置 data-rule="myRule" 即可使用自定义规则进行验证。 在表单提交时，可以使用 layui.form.on('submit', function(data){}) 方法来监听表单提交事件，并在事件回调函数中对表单进行验证。如果验证通过，可以通过 data.field 获取表单数据进行提交。 例如： ```javascript layui.form.on('submit(submitBtn)', function(data){ // 表单验证通过，可以进行提交 console.log(data.field); // 进行表单提交 return false; // 阻止表单跳转 }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值