基於PHP框架TP5，演示UI框架Layui的表單驗證以及監聽submit提交

承接昨日文章《「UI框架」Layui結合form,table實現全選、反選效果》，今日結合PHP開源框架ThinkPHP5，實現layui框架的form表單簡單驗證以及監聽submit提交，分別用到了element、表單form、彈窗layer、jQuery模塊。。以添加友情鏈接為例，如圖：

HTML代碼如下：

表單頁面對應的HTML代碼

對應的JS代碼如下：

表單提交對應的JS代碼

JS代碼中我用到了表單驗證以及監聽submit提交。form.verify為表單驗證，當內置驗證滿足不了使用時，用來自定義驗證規則，通常對於比較複雜的校驗。我在鏈接名稱那裡加了lay-verify="required|name"、在鏈接那裡加了lay-verify="required|url"，驗證通過的前提是，名稱、鏈接都必須填寫，並且名稱「鏈接名稱必須1到6位，且不能出現空格」，鏈接必須是http://開頭的正確地址。驗證效果如下：

鏈接名稱超過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：當前容器的全部表單欄位，名值對形式：。

這裡，我通過ajax提交時，讓控制器返回一些數據，比如狀態、提示語等。我這裡用的是PHP開源框架ThinkPHP5，通過success返回的參數有：code狀態碼，msg提示信息，url：跳轉鏈接。

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

提交後彈窗提示「添加成功」並自動關閉，然後跳轉到對應的URL，效果如下。

彈窗提示添加成功後自動跳轉到列表頁

OK！Layui表單驗證以及表單提交就這麼簡單，相對於以前可以少些很多js代碼。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！