layui表单验证范例

最新推荐文章于 2024-08-11 15:42:10 发布

Anwous

最新推荐文章于 2024-08-11 15:42:10 发布

阅读量8.5k

点赞数

分类专栏： HTML AJAX JavaScript ThinkPHP

本文链接：https://blog.csdn.net/Anwous/article/details/80657321

版权

这篇博客详细介绍了如何在layui中实现表单验证，包括关键的HTML代码示例和配置过程。

摘要由CSDN通过智能技术生成

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;
        //自定义验证规则

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Anwous

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Layui表单验证

weixin_44540471的博客

05-16

5904

要想使用layui插件中form表单验证，我们首先需要加载初始化layui模块，因为这里用到form表单，所以要加载form模块。 var layer, layuiTable, form;//保存layui模块以便全局使用 $(function(){ //加载&&初始化layui模块 layui.use(['layer', 'table', 'form'], function () { layer = layui.layer, layuiTable

layui表单验证

11-01

个人总结的有关layui中对页面的一些验证，省份正，邮箱等

参与评论您还未登录，请先登录后发表或查看评论

使用layui自带属性实现表单验证，自定义验证，以及下拉框默认修改

weixin_44681697的博客

04-12

3587

这里写自定义目录标题[官方代码拿过来](https://www.layui.com/doc/modules/form.html)

Layui——实现弹出层中的form表单验证（lay-verify不生效）

最新发布

戏拈秃笔的博客

08-11

708

弹出层的表单验证和普通的表单验证不同，弹出层的表单验证使用的是弹出层的提交按钮，而该按钮并没有和lay-verify绑定，也就无法触发表单验证。实现思路就是在弹出层form表单页面中设置一个隐藏的提交按钮，然后在layer弹出层点击“确定”按钮时，找到form表单中隐藏的提交按钮，触发点击事件，即可实现验证功能。

layui 表单验证案例

weixin_44570988的博客

11-18

512

文本框，手机，邮箱，textarea等格式的验证下面是需要引入的插件 <script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet" href="layui/css/layui.css"> HTML代码： <form class="layui-form" action

layui 表单验证整数

php菜鸟技术天地

03-24

3945

<input name="location" class="layui-input" lay-verify="number|Ndouble" type="text"/> //自定义表单验证 form.verify({ Ndouble:[ /^[1-9]\d*$/ ,'只能输入整数哦' ...

layui表单提交前数据检验

Zdelta

02-12

7683

layui自带了一些简单的数据检验，lay-verify，如： <form> <input type="text" name="operatMoney" class="layui-input" lay-verify="required|number"> <div class="layui-form-item"&amp

layui表单验证select下拉框实现验证的方法

12-29

layui 的form表单里的select 一开始以为加上lay-verify=”required”就可以验证不空了,可是反复试了几次都不能验证代码如下： <div class=layui-form-item> <label class=layui-form-label>所属工种: ...

layui插件表单验证提交触发提交的例子

10-16

这篇文章主要讲述了如何使用layui插件进行表单验证以及提交触发提交的实现方法。下面，我们将详细解析文章中涉及到的关键知识点。 ### 一、Layui框架介绍 Layui是一个前端UI框架，它提供了一套简单易用的界面元素...

layui的表单验证支持ajax判断用户名是否重复的实例

01-19

onblur()失去焦点事件，用按钮来手动触发，表单又不太美观，可以使用form表单的verify来进行验证。 html： <div class=layui-form-item> <label class=layui-form-label>用户名 <div class=layui-input-block> &...

layui 解决富文本框form表单提交为空的问题

10-16

今天小编就为大家分享一篇layui 解决富文本框form表单提交为空的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

layui输入框中只允许输入整数的实现方法

10-16

今天小编就为大家分享一篇layui输入框中只允许输入整数的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解析使用js判断只能输入数字、字母等验证的方法(总结)

10-27

本篇文章对使用js判断只能输入数字、字母等验证的方法进行了总结介绍，需要的朋友参考下

layui自定义表单校验

洛少的专栏

12-14

1万+

自定义一个金额的校验<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义验证</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

先通过 layui 进行表单验证 ，验证通过后使用ajax提交表单

zhangbw's blog

08-20

2744

一、需求使用 layui-verify 验证表单选项 , 如果不满足则停留在此页面，不进行表单提交。如果表单验证通过，通过ajax对表单进行相应操作。二、效果图三、如何使用？示例：表单 <form class="layui-form" id="addBookForm"> <div class="layui-form-item"> <label class="layui-form-label">

layui 自定义表单验证

dbbxn59977的博客

06-26

<form id="form1" class="layui-form" action="提交路径" method="post"> <div class="layui-form-item "> 　　<label class="layui-form-label">成本预算 <span style="color: ...

layui之form表单验证

热门推荐

欢迎交流PHP和前端知识QQ：634487911

09-26

1万+

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial

layui表单添加身份证验证

07-14

在 layui 中，你可以使用 `lay-verify` 属性和内置的 `identity` 验证规则来实现身份证验证。下面是一个示例代码： ```html <form class="layui-form" lay-filter="example"> <div class="layui-form-item"> <label class="layui-form-label">身份证号码</label> <div class="layui-input-block"> <input type="text" name="idCard" lay-verify="identity" placeholder="请输入身份证号码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submit">提交</button> </div> </div> </form> <script> layui.use(['form'], function() { var form = layui.form; // 自定义身份证验证规则 form.verify({ identity: [/^\d{17}[\dXx]$/, '请输入正确的身份证号码'] }); // 监听表单提交事件 form.on('submit(submit)', function(data) { console.log(data.field); return false; // 阻止表单提交，仅用于演示 }); }); </script> ``` 在这个示例中，我们使用了 `lay-verify="identity"` 将身份证验证规则应用到了输入框上。同时，我们通过 `form.verify()` 方法自定义了身份证验证规则。在这里，我们使用了正则表达式 `/^\d{17}[\dXx]$/` 来匹配合法的身份证号码。当用户提交表单时，`form.on('submit(submit)', function(data) { ... })` 会监听到提交事件，并执行相关的操作。在这里，我们仅仅是打印表单数据到控制台，并通过 `return false;` 阻止表单的实际提交（此处仅用于演示）。请确保在正确引入 layui 和将示例代码中的 `'example'` 替换为你的表单的 `lay-filter` 属性值。同时，你也可以根据需要自定义身份证验证规则，以满足具体的需求。