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

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

HTML表单

HTML 表单用于搜集不同类型的用户输入。

<form> 元素

<form> 元素定义 HTML 表单：

语法：<form></form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素有很多形态，根据不同的 type 属性。

1. 文本输入

<input type="text"> 定义用于文本输入的单行输入字段

2、密码框

<input type="password"> 定义单选按钮。

密码框是为了隐藏用户密码信息的输入框，语法形式与文本框差不多，不同的是类型 为 password。

3、单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮是在表单中有多个选项，且只能选一个的情况下使用。

注：checked表示默认选中项。

如：<input type="radio" name="sex"checked> 男

<input type="radio" name="sex"> 女

表示默认选中男项。

4、复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。

复选框是可以选多个选项的选项框，与单选不同的是复选框可以选取多个选项，而且也可以默认几个选项都处于选中状态。

注：checked表示默认选中项。

如：<input type="checkbox" checked>

5、<select> 元素（下拉列表）

下拉列表是可以选择的列表，当在列表中选择要选的选项时使用，只能选其中一个选项（通过设置也可以选几项）。

语法：

<select>

<option>北京</option>

<option selected>上海</option>

</select>

注：selected 表示默认选中项

6、<textarea> 元素（文本域）

<textarea> 元素定义多行输入字段：

文本域是用在要输入多行文本，填写大量的文字时用到。