首先要感謝這100多位朋友的堅(jiān)持。最近調(diào)整了個(gè)人定位，沒(méi)有更新推送，敬請(qǐng)諒解。

——你隔壁的程序員

繼承昨天的網(wǎng)站文章《UI框架結(jié)合form，實(shí)現(xiàn)全選、逆選的效果》。

今天結(jié)合PHP開(kāi)源框架，使用框架的表單表單簡(jiǎn)單驗(yàn)證和監(jiān)控提交，分別是表單表單、彈窗、模塊。

以添加鏈接為例，如圖：

HTML 代碼如下：

表單頁(yè)面對(duì)應(yīng)的HTML代碼

對(duì)應(yīng)的JS代碼如下：

表單提交對(duì)應(yīng)的JS代碼

在 JS 代碼中，我使用了表單驗(yàn)證和監(jiān)控提交。形式。對(duì)于表單驗(yàn)證，當(dāng)內(nèi)置驗(yàn)證無(wú)法使用時(shí)，用于自定義驗(yàn)證規(guī)則，通常用于更復(fù)雜的驗(yàn)證。我在鏈接名稱中添加了lay-="|name"，在鏈接中添加了lay-="|url"。驗(yàn)證通過(guò)的前提是必須填寫(xiě)名稱和鏈接，并且名稱“鏈接名稱必須是1到6位且不能有空格”，鏈接開(kāi)頭必須是正確的地址。驗(yàn)證效果為如下：

如果鏈接名稱超過(guò)6位，會(huì)彈出窗口提示

鏈接未以鏈接格式不正確的消息開(kāi)頭

lay-預(yù)設(shè)（必填）、（手機(jī)號(hào)）、（郵箱）、url（網(wǎng)址）、（號(hào)碼）、日期（日期）、（身份證）等內(nèi)置驗(yàn)證網(wǎng)站模板，可以同時(shí)使用多個(gè)驗(yàn)證時(shí)間，然后具體可以移到官網(wǎng)。

form.on('(add)', (data) {}); 用于監(jiān)控提交。里面的參數(shù)add就是事件過(guò)濾器的值。我在 HTML 代碼中設(shè)置了lay-='add'來(lái)實(shí)現(xiàn)這個(gè)綁定。

監(jiān)聽(tīng)器返回三個(gè)值，即elem：被執(zhí)行事件的元素DOM對(duì)象php tp框架 跳轉(zhuǎn)頁(yè)面php tp框架 跳轉(zhuǎn)頁(yè)面，比如一個(gè)對(duì)象；表單提交的表單對(duì)象，當(dāng)有表單標(biāo)簽時(shí)返回；：當(dāng)前容器的所有表單字段，名稱-值對(duì)形式：{name:}。

這里我通過(guò)ajax提交的時(shí)候，讓控制器返回一些數(shù)據(jù)，比如狀態(tài)、提示等。我這里使用的是PHP開(kāi)源框架，返回的參數(shù)有：代碼狀態(tài)碼、msg提示信息、url：跳轉(zhuǎn)鏈接.

請(qǐng)點(diǎn)擊此處輸入圖片說(shuō)明

對(duì)應(yīng)的PHP代碼如下（純前端人員可以忽略）：

提交后彈窗提示“添加成功”并自動(dòng)關(guān)閉，然后跳轉(zhuǎn)到對(duì)應(yīng)的URL。效果如下。

彈窗提示添加成功后自動(dòng)跳轉(zhuǎn)到列表頁(yè)面

行！表單驗(yàn)證和表單提交就這么簡(jiǎn)單，js代碼比以前少了很多。

最后網(wǎng)站模板，明天再過(guò)一會(huì)就是國(guó)慶長(zhǎng)假了。祝您雙節(jié)快樂(lè)！