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

最新推荐文章于 2024-08-23 17:45:10 发布
最新推荐文章于 2024-08-23 17:45:10 发布
阅读量6.8k 收藏 2
点赞数 1
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X_lywfc/article/details/102155308
版权

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

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

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

X_lywfc
关注
专栏目录
使用 layui 中的 lay-verify自定义规则来验证 form表单的内容
JinKin_OldWang的博客
09-28 3517
话不多说，直接上代码。 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表单提交；jquery.form.js；lay-verify，lay-filter；
m0_52613676的博客
11-29 3250
话不多说，直接看代码： 引入相关文档： <script th:src="@{/js/jquery-1.9.1.js}"></script> <script th:src="@{/js/jquery.form.js}"></script> <script src="/layui/layui.js"></script> <link rel="stylesheet" href="/layui/css/layui.css"> （这
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 form 自定义校验，不通过form还是会提交的问题
qq_35238963的博客
11-18 4940
layui一个不错的前端框架，上手较快不过，不过官网文档有些还是不全面，废话不多说，直接入题。 写了一个form但是要校验用户名的唯一性，所以使用了layui的自定义校验，代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...
Flask+LayUI开发手记（二）：LayUI弹出层表单的校验
最新发布
hbrown的博客
08-23 700
前几天做了很多增删改查的功能，都是用layer.open打开编辑页面，然后在yes中获取form的值数组，再用post进行提交的，只是还没研究到lay-verify这块，今天这个功能特别简单，所以觉得研究一下也是很有必要的，应该说网上的参考做法都复杂了，比如绑定页面内提交按钮，在用btn0提交后激发form内提交按钮动作，太难控制了。这次又仔细地看了一个form.submit的说明，发现它多了两个参数，一个是form的filter项，另一个是有个提交的回调函数入口，入口参数是表单数据data。
使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决
楞次定律
07-31 1万+
使用layui表单通过ajax验证不通过form表单依然会提交的问题的解决 功能是新增一个数据,需要验证该数据是否已经存在.通过ajax查询后台,返回验证结果. 使用layui form.verify 自定义验证规则.出现的问题是后台返回结果正常,但即使是验证不通过,表单依然会提交. 解决方法如下: HTML代码 表单其他元素使用layui预置验证规则,提交按钮使用自定义验证规则err...
Layui表单的验证
qq_39736671的博客
12-02 672
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...
form触发2次 layui_layui插件表单验证提交触发提交的例子
weixin_39929254的博客
02-01 357
废话不多说，大家直接看代码吧！管理系统账号：密码： 自动登录忘记密码?登录重置layui.use(['layer','upload','form'],function() {var layer = layui.layer,form = layui.form;/*** 通用表单验证*/form.verify({username:[/^([a-zA-Z0-9_\.\-])+...
layui的表单提交以及验证和修改弹框的实例
12-29
<div class=layui-form> <input type=text class=txt name=newName lay-verify=newName lay-verType=tips placeholder=请输入姓名> <input type=text class=txt name=newCard lay-verify=newCard lay-...
layui校验不成功依然提交的问题
hantanxin的专栏
12-16 1420
//监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); //ajax提交放在这里 return false; }); 一定要把提交的代码放到监听的代码里面，问题解决！ 另外， element.on('submit...
layui自定义表单验证无效
The_Lucky_one的博客
06-11 1332
layui自定义表单验证无效
layer html表单验证,layui lay-verify form表单自定义验证规则详解
weixin_28683391的博客
06-17 498
虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。html：提交js：form.verify({//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字],digital: [/^[0-4]*$/,'请填入0-4的分数']});这样写没问题，但是form.verify放置的位置没讲清楚，还是要自己试一下。lay...
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
苗老八的博客
05-25 2378
layui的表单是我特别常用的一个功能，这次在写添加和修改界面时，也顺手将layui的表单界面放进去，想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证，没想到遇到了如题目所描述的情况。 在这里我并没有用到他自带的“立即提交”的submit按钮，而是弹出层的“确定”按钮，放代码： //“新增信息”按钮点击事件 add.addEventListener("click", function () { layer.open({ type: 1,
Layui表单自定义验证（附带根据条件改变实时改变验证条件）
qq_41812381的博客
09-09 1013
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 633
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 3564
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 form 表单验证lay-verify
04-29
自定义验证规则需要在表单元素上设置 data-rule 属性，并在 JavaScript 中使用 layui.form.verify 方法添加验证规则。 例如，在表单元素上设置 lay-verify="required|phone"，表示该元素需要进行必填和手机号码的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值