layui lay-verify form表单自定义验证规则,已整理合成一个demo 方便使用

最新推荐文章于 2022-07-27 09:52:46 发布
最新推荐文章于 2022-07-27 09:52:46 发布
阅读量551 收藏
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013931283/article/details/114367303
版权

文档虽然解释和详细了,但是每次都要重新翻一遍,有点麻烦,偶然情况之下 发现了一个layui常用代码网站,里面集成了常用的规则和自定义规则 很方便

http://www.shagua.wiki/project/3?p=121
//表单验证,重写phone,email,url,number,date,identity等规则
//是因为,layui验证有个问题
//就当你使用这些规则的时候,他就要求该表单项必填,
//无法达到,用户填写就验证,不填就不验证的效果

部分规则如下:
在这里插入图片描述

fwfgwg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui lay-verify form表单自定义验证规则详解
10-16
今天小编就为大家分享一篇layui lay-verify form表单自定义验证规则详解，具有很好的参考价值，相信我对大家有所帮助。一起跟随小编过来看看吧
layui 多表单验证
qq_43789643的博客
11-27 1883
前言 最近在用layui表单form组件时，发现一个问题、那就是如果页面中有多个form表单的话如何，进行提交时如何实现即不用自己一个一个的写js验证。又可以用layui知道的form组件。有需求，那就开搞吧。 正文 先看效果 这里为了看效果我把页面放到了最小 代码： 1、更改在form.js中增加方法 2、使用方法 /** * 我这儿是跟在了u.prototype.val方法后面了。 * content:实现多表格验证 验证失败只返回 false 否则 true *
layer 一个页面两张表单
狼魂之力
04-14 3925
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/jsp/common.jsp" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti...
layui的lay-verify 验证使用自带的email phone时候不填不验证，填写了才验证
肖肖肖丽珠的博客
07-15 6413
<input type="tel" name="contacttel" lay-verify="phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input" > 我我没用写required，因为这里希望有电话验证没有就不验证。 但是这么写却在没有填写的时候提示请输入正确的手机号。可能是他觉得手机号是空...
layui利用自带的验证规则验证弹窗中的form表单
热门推荐
飞龙的博客
03-08 1万+
只需一步，就能使用layui自带的验证方法对弹出层的form表单进行验证： 在layer.open中添加红色框部分就能实现验证了。 大家可以点击下面的链接查看更多内容： http://www.layui.com/doc/modules/form.html#onsubmit http://fly.layui.com/jie/6560/...
layui多表单校验处理
You Jump,I Jump.
06-23 2387
layui多表单校验 layui动态表单
layui的表单——自定义验证规则
记不住代码的前端混子
05-08 2553
最近layui的表单用的比较多，所以整理来一下自定义的验证如下（下面是自己写的例子）： layui的官网 引入layui之后 html <form action="" class="layui-form"> <!-- 表单 --> <div class="login_from data_felx flex-diry"> <div class="span flex-bet data_felx"> <span&
form触发2次 layui_layui lay-verify form表单自定义验证规则详解
weixin_35931756的博客
02-06 1098
虽然layui的官方文档已经是写的比较详细，但是初次使用的时候总会懵一下，这里纪录一下lay-verify自定义验证规则的时候到底放哪。html：提交js：form.verify({//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字],digital: [/^[0-4]*$/,'请填入0-4的分数']});这样写没问题，但是form.verify放置的位置没讲清楚，还是要自己试一下。lay...
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中使用form表单监听ajax异步验证注册的实例
12-09
layui的表单元素通常会添加一些特定的class和属性，如`layui-form-label`、`layui-input-inline`和`lay-verify`。`lay-verify`属性用于定义字段的验证规则，如`required`表示该字段为必填。 接下来，我们需要监听...
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用...在实际开发中，你可以根据需求自定义表单样式、验证规则以及交互逻辑，以满足项目的各种需求。同时，layui还提供了分页、表格、下拉选择等众多组件，为前端开发带来极大的便利。
layui框架实战案例(11)：表单自定义验证规则
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-27 534
layui框架实战案例(11)：表单自定义验证规则
Layui结合jQueryValidate实现表单前台验证
yangwang666的博客
08-18 1064
一丶js文件 和css文件 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
苗老八的博客
05-25 2289
layui的表单是我特别常用的一个功能，这次在写添加和修改界面时，也顺手将layui的表单界面放进去，想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证，没想到遇到了如题目所描述的情况。 在这里我并没有用到他自带的“立即提交”的submit按钮，而是弹出层的“确定”按钮，放代码： //“新增信息”按钮点击事件 add.addEventListener("click", function () { layer.open({ type: 1,
Layui form 表单验证lay-verify的使用 和自定义验证及常用正则表达式
qq_37708081的博客
12-30 1万+
layui 表单自带校验 lay-verify：表单验证的关键字 有以下值供选择： required (必填项) phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity(身份证) 自定义值 layui支持多条规则的验证： 格式：lay-verify=”验证1|验证2” 如：lay-verify=”required|phone|number...
2021-09-09 layui-verify表单验证
ZT1090258642的博客
09-09 513
官方文档（底部的表单验证） html <input type="text" lay-verify="checkNumLength" /> js - 两种方式 1.使用正则表达式进行限制 form.verify({ checkNumLength: [ /^.{10}$/ , '比赛CODE只能输入10个字符的长度！' ] }); 2.条件判断 form.verify({ ch
layui中使用lay-verify进行多条件校验
weixin_44988848的博客
07-09 3142
最近在工作中，用到了layui的校验。 一、layui的校验很简单，主要是4步： 1.在form表单内加上class=“layui-form” 2.在提交按钮上加上lay-submit 3.在想要校验的标签，加上lay-verify=””，在这个属性里，加上想要的值，就可以进行校验了。 lay-verify：是表单验证的关键字 有以下值供选择： required (必填项) phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity(身份证) 二、除了
使用 layui 中的 lay-verify自定义规则来验证 form表单的内容
JinKin_OldWang的博客
09-28 3454
话不多说，直接上代码。 jsp或html中的代码 注意：验证的输入框和提交按钮要在form表单中 <form class="layui-form layui-form-pane1 required-validate" rel="pagerForm" lay-filter="productGetOne" method="post" action="<c:url value='/...
layui表单验证xmselect必填
天锋 BLOG
07-13 2606
xmselect必填
<body> <style> .demo-login-container{width: 320px; margin: 21px auto 0; margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button> </div> </div> </form> <!-- 请勿在项目正式环境中引用该 layui.js 地址 --> <script> layui.use(function(){ var form = layui.form; var layer = layui.layer; // 提交事件 form.on('submit(demo-login)', function(data){ var field = data.field; // 获取表单字段值 // 显示填写结果，仅作演示用 layer.alert(JSON.stringify(field), { title: '当前填写的字段值' }); // 此处可执行 Ajax 等操作 // … return false; // 阻止默认 form 跳转 }); }); </script> </body>在上面的代码中需要添加一行文字：高压氧和一张自定义的图片A
最新发布
06-11
margin-top: 10%} </style> <form class="layui-form" > <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值