整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
接昨日文章《「UI框架」Layui結(jié)合form,table實現(xiàn)全選、反選效果》，今日實現(xiàn)form表單的簡單驗證以及監(jiān)聽submit提交。以添加友情鏈接為例，如圖：
HTML代碼如下：
對應(yīng)的JS代碼如下：
JS代碼中我用到了表單驗證以及監(jiān)聽submit提交。form.verify為表單驗證，當(dāng)內(nèi)置驗證滿足不了使用時，用來自定義驗證規(guī)則，通常對于比較復(fù)雜的校驗。我在鏈接名稱那里加了lay-verify="required|name"、在鏈接那里加了lay-verify="required|url"，驗證通過的前提是，名稱、鏈接都必須填寫，并且名稱“鏈接名稱必須1到6位，且不能出現(xiàn)空格”，鏈接必須是http://開頭的正確地址。驗證效果如下：
lay-verify預(yù)設(shè)了required（必填項）、phone（手機號）、email（郵箱）、url（網(wǎng)址）、number（數(shù)字）、date（日期）、identity（身份證）等內(nèi)置驗證，可以同時使用多條驗證，再具體的可以移步layui官網(wǎng)。
form.on('submit(add)', function(data) {});用來監(jiān)聽submit提交，submit里面的參數(shù)add是事件過濾器的值，我已經(jīng)在HTML代碼中的button設(shè)置了lay-filter='add'來實現(xiàn)綁定。
監(jiān)聽submit返回了三個值，分別為elem：被執(zhí)行事件的元素DOM對象，一般為button對象；form被執(zhí)行提交的form對象，一般在存在form標(biāo)簽時才會返回；field：當(dāng)前容器的全部表單字段，名值對形式：{name: value}。
這里，我通過ajax提交時，讓控制器返回一些數(shù)據(jù)，比如狀態(tài)、提示語等。我這里用的是PHP開源框架ThinkPHP5，通過success返回的參數(shù)有：code狀態(tài)碼，msg提示信息，url：跳轉(zhuǎn)鏈接。
對應(yīng)的PHP代碼如下（純前端人員可以忽略）：
提交后彈窗提示“添加成功”并自動關(guān)閉，然后跳轉(zhuǎn)到對應(yīng)的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 元素、復(fù)選框、單選按鈕、提交按鈕等等。
<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。
1. 文本輸入
<input type="text"> 定義用于文本輸入的單行輸入字段
2、密碼框
<input type="password"> 定義單選按鈕。
密碼框是為了隱藏用戶密碼信息的輸入框，語法形式與文本框差不多，不同的是類型 為 password。
3、單選按鈕輸入
<input type="radio"> 定義單選按鈕。
單選按鈕是在表單中有多個選項，且只能選一個的情況下使用。
注：checked表示默認(rèn)選中項。
如：<input type="radio" name="sex"checked> 男
<input type="radio" name="sex"> 女
表示默認(rèn)選中男項。
4、復(fù)選框（Checkboxes）
<input type="checkbox"> 定義了復(fù)選框。
復(fù)選框是可以選多個選項的選項框，與單選不同的是復(fù)選框可以選取多個選項，而且也可以默認(rèn)幾個選項都處于選中狀態(tài)。
注：checked表示默認(rèn)選中項。
如：<input type="checkbox" checked>
5、<select> 元素（下拉列表）
下拉列表是可以選擇的列表，當(dāng)在列表中選擇要選的選項時使用，只能選其中一個選項（通過設(shè)置也可以選幾項）。
語法：
<select>
<option>北京</option>
<option selected>上海</option>
</select>
注：selected 表示默認(rèn)選中項
6、<textarea> 元素（文本域）
<textarea> 元素定義多行輸入字段：
文本域是用在要輸入多行文本，填寫大量的文字時用到。
<input type="button" />
<input type="submit" />
<input type="rest" />
<button />*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
