首页 » 网站建设 » phplayui表单技巧_基于TP5框架演示UI框架Layui的表单验证以及监听submit提交

phplayui表单技巧_基于TP5框架演示UI框架Layui的表单验证以及监听submit提交

duote123 2024-12-06 0

扫一扫用手机浏览

文章目录 [+]

HTML代码如下:

对应的JS代码如下:

phplayui表单技巧_基于TP5框架演示UI框架Layui的表单验证以及监听submit提交

JS代码中我用到了表单验证以及监听submit提交。
form.verify为表单验证,当内置验证知足不了利用时,用来自定义验证规则,常日对付比较繁芜的校验。
我在链接名称那里加了lay-verify=\"大众required|name\"大众、在链接那里加了lay-verify=\"大众required|url\"大众,验证通过的条件是,名称、链接都必须填写,并且名称“链接名称必须1到6位,且不能涌现空格”,链接必须是http://开头的精确地址。
验证效果如下:

phplayui表单技巧_基于TP5框架演示UI框架Layui的表单验证以及监听submit提交
(图片来自网络侵删)

lay-verify预设了required(必填项)、phone(手机号)、email(邮箱)、url(网址)、number(数字)、date(日期)、identity(身份证)等内置验证,可以同时利用多条验证,再详细的可以移步layui官网。

form.on('submit(add)', function(data) {});用来监听submit提交,submit里面的参数add是事宜过滤器的值,我已经在HTML代码中的button设置了lay-filter='add'来实现绑定。

监听submit返回了三个值,分别为elem:被实行事宜的元素DOM工具,一样平常为button工具;form被实行提交的form工具,一样平常在存在form标签时才会返回;field:当前容器的全部表单字段,名值对形式:{name: value}。

这里,我通过ajax提交时,让掌握器返回一些数据,比如状态、提示语等。
我这里用的是PHP开源框架ThinkPHP5,通过success返回的参数有:code状态码,msg提示信息,url:跳转链接。

对应的PHP代码如下(纯前端职员可以忽略):

提交后弹窗提示“添加成功”并自动关闭,然后跳转到对应的URL,效果如下。

OK!
Layui表单验证以及表单提交就这么大略,相对付以前可以少些很多js代码。
欢迎留言互换!

标签:

相关文章

FL语言,未来编程的引领者

随着信息技术的飞速发展,编程语言作为计算机科学的核心工具,其重要性不言而喻。在众多编程语言中,FL语言凭借其独特的优势,成为了未来...

网站建设 2024-12-26 阅读0 评论0

EL脚本语言,引领编程新潮流的利器

随着互联网技术的飞速发展,编程语言在人们的生活中扮演着越来越重要的角色。在众多编程语言中,EL脚本语言以其独特的魅力和优势,成为了...

网站建设 2024-12-26 阅读0 评论0

E语言内存的探索与未来展望

随着计算机科学的飞速发展,E语言作为一种新兴的编程语言,逐渐走进了人们的视野。E语言内存作为E语言的核心组成部分,其重要性不言而喻...

网站建设 2024-12-26 阅读0 评论0

E语言在文件存储领域的应用与发展

随着信息技术的飞速发展,数据已成为现代社会不可或缺的宝贵资源。文件存储作为数据管理的基础,其重要性不言而喻。E语言作为一种高效、灵...

网站建设 2024-12-26 阅读0 评论0

韩国IT公司的崛起,技术创新与全球化布局

近年来,随着全球经济的快速发展,信息技术产业已经成为推动各国经济增长的重要引擎。作为亚洲四小龙之一,韩国在IT产业领域取得了举世瞩...

网站建设 2024-12-26 阅读0 评论0