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

——你隔壁的程序員

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

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

以添加鏈接為例，如圖：

HTML 代碼如下：

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

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

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

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

如果鏈接名稱超過6位，會彈出窗口提示

鏈接未以鏈接格式不正確的消息開頭

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

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

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

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

請點(diǎn)擊此處輸入圖片說明

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

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

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

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

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