您的位置 首页 > 数码极客

tp5如何接收异步提交的数据

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

HTML代码如下:

对应的JS代码如下:

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

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

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

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“tp5如何接收异步提交的数据”边界阅读