Layui框架form模块的表单验证

在layui框架里边针对于表单元素做了比较多的功能，下面将介绍的功能就是form模块里面自00带的表单验证功能，该功能可以在提交表单时自动验证表单。

首先要使用form模块时需要加载模块，这是所有模块都需要干的事情，否则将不能使用模块里的功能，代码如下图

加载完成后，在页面元素里的单个表单中的form元素需要加上layui定义的类‘layui-form’。

添加完后就可以在form元素里添加表单元素了，当添加完表单元素后，在表单元素里添加layui定义的属性‘lay-verify’，其作用就是添加表单验证功能，而该属性的属性值则是验证的规则，如下图。

在layui里边自带的表单验证则有以下required(必填)、phone(电话)、email(邮箱)、url(网址)、mumber(数字)和identity(身份证)，除此之外layui还支持自定义验证规则，如下图。

现在验证的方式了解了，那么怎么触发这些验证呢，这就需要到表单提交的监听了，这也是form模块的一部分，当处于表单中的按钮被点击了，这个表单里边的所有带验证的表单元素就会自动验证，并返回数据到监听事件里。代码如下图

现在写完了简单的代码后去页面看看效果如何吧

当验证未通过时，页面会提示并且控制器没有任何输出

当验证通过时，控制器将会输出表单验证成功的值

Layui框架form模块的表单验证相关推荐

layui弹出层的表单验证
这里写自定义目录标题 layui弹出层form表单自带的验证不执行废话少说放代码接下来如何让弹出层执行form验证规则但是这个提交并不完整依旧有问题,只是部分验证有用,表单验证没有验证数据直接提 ...
ThinkPhp框架：父类及表单验证
这个知识点,就可以通过"登录"和"注册"的页面来学习这个知识点了首先先做一个"登录"功能一.登录功能(父类) (1)登录的控制器在我的 ...
关于微信小程序中uView中通过packer选择器修改表单无法触发form组件的表单验证的问题
uView中使用form表单组件,如果form-item为正常的input组件,在输入和修改form-item绑定的变量的时候,都会触发form表单的表单验证事件但是如果form-item中不是in ...
微信小程序的表单验证
我们写vue项目的时侯经常会用一些ui框架,都会有表单验证那小程序想要实现前端表单验证通过后再提交给后端怎么实现呢首先,我们需要一个叫WxValidate.js的代码,网上会有下载一下,不想下载也 ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
第47章表单验证之DataAnnotations与FluentValidation
DataAnnotations DataAnnotations是.Net(Core)框架内置的表单验证中间件,当前它的版本基本与.Net(Core)框架一致,.Net6框架最后一次更新的日期是:202 ...
JQuery002: 表单验证及ajax数据提交
一.三种情况下触发验证事件输入框失去焦点 -> $('input[!type=button]').blur(function() {}) 输入框输入中 -> $('input[!type ...
框架生成的HTML修改,Django框架form表单验证修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...
Layui form 表单验证规则 lay-verify
layui 表单 1.表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required (必填项) phone(手机号) email(邮箱) url(网址) number( ...

Layui框架form模块的表单验证

Layui框架form模块的表单验证相关推荐

最新文章

热门文章