首先要感谢这100多位朋友的坚持。最近调整了个人定位，没有更新推送，敬请谅解。

——你隔壁的程序员

继承昨天的网站文章《UI框架结合form，实现全选、逆选的效果》。

今天结合PHP开源框架，使用框架的表单表单简单验证和监控提交，分别是表单表单、弹窗、模块。

以添加链接为例，如图：

HTML 代码如下：

表单页面对应的HTML代码

对应的JS代码如下：

表单提交对应的JS代码

在 JS 代码中，我使用了表单验证和监控提交。形式。对于表单验证，当内置验证无法使用时，用于自定义验证规则，通常用于更复杂的验证。我在链接名称中添加了lay-="|name"，在链接中添加了lay-="|url"。验证通过的前提是必须填写名称和链接，并且名称“链接名称必须是1到6位且不能有空格”，链接开头必须是正确的地址。验证效果为如下：

如果链接名称超过6位，会弹出窗口提示

链接未以链接格式不正确的消息开头

lay-预设（必填）、（手机号）、（邮箱）、url（网址）、（号码）、日期（日期）、（身份证）等内置验证网站模板，可以同时使用多个验证时间，然后具体可以移到官网。

form.on('(add)', (data) {}); 用于监控提交。里面的参数add就是事件过滤器的值。我在 HTML 代码中设置了lay-='add'来实现这个绑定。

监听器返回三个值，即elem：被执行事件的元素DOM对象php tp框架 跳转页面php tp框架 跳转页面，比如一个对象；表单提交的表单对象，当有表单标签时返回；：当前容器的所有表单字段，名称-值对形式：{name:}。

这里我通过ajax提交的时候，让控制器返回一些数据，比如状态、提示等。我这里使用的是PHP开源框架，返回的参数有：代码状态码、msg提示信息、url：跳转链接.

请点击此处输入图片说明

对应的PHP代码如下（纯前端人员可以忽略）：

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

弹窗提示添加成功后自动跳转到列表页面

行！表单验证和表单提交就这么简单，js代码比以前少了很多。

最后网站模板，明天再过一会就是国庆长假了。祝您双节快乐！