您的位置 首页 php

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

承接昨日文章《 「UI框架」Layui结合form,table实现全选、反选效果 》,今日实现form表单的简单验证以及监听submit提交。以添加友情链接为例,如图:

HTML代码如下:

对应的JS代码如下:

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

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代码。欢迎留言交流!

文章来源:智云一二三科技

文章标题:基于TP5框架,演示UI框架Layui的表单验证以及监听submit提交

文章地址:https://www.zhihuclub.com/80400.shtml

关于作者: 智云科技

热门文章

网站地图