鲁达 承接昨日文章《「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代码。欢迎留言交流！