整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
接昨日文章《「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> 元素定義多行輸入字段：
文本域是用在要輸入多行文本，填寫大量的文字時用到。
<input type="button" />
<input type="submit" />
<input type="rest" />
<button />*請認真填寫需求信息，我們會在24小時內與您取得聯系。
