Mip中表單元件怎麼用

本篇文章主要介紹MIP中表單元件怎麼用。

Mip即行動網頁加速器，在先前的文章已經跟大家介紹過MIP中幾個比較常用的元件，如輪播圖元件、內嵌框架元件、折疊選單元件、App推廣下載元件等。

推薦參考手冊：《MIP文件手冊》

本節內容繼續介紹給大家表單元件的使用。

表單元件（mip-form 表單，表單提交）基礎程式碼範例如下：

<mip-form method="get" url="http://www.php.cn?we=123">
    <input type="text" name="username" validatetarget="username" validatetype="must" placeholder="姓名">
    <div target="username">姓名不能为空</div>
    <input type="number" name="age" validatetarget="age" validatetype="must" placeholder="年龄">
    <div target="age">年龄不能为空</div>
    <input type="submit" value="提交">
</mip-form>

##請注意，需要在mip檔案body中引入以下腳本。

<script src="https://c.mipcdn.com/static/v1/mip-form/mip-form.js"> </script>

透過瀏覽器訪問，效果如下圖：

#當我們為空點擊提交時，就會出現上圖中提示。

其中，一些重要屬性介紹：

method：表示表單提交方法。表單提交方法如果為 post，應使用 HTTPS 位址。

url：必須是HTTP(S) 或// 開頭的位址

validatetarget：表示驗證提示對應tag，用對應錯誤時的提示顯示元素的查找

validatetype：表示驗證類型, 用於支援簡單的驗證。目前提供 email, phone, idcar, custom。為 custom 時則需要填寫 validatereg必選項：否

validatereg：表示自訂驗證，補充站​​長個人化的驗證規則。如果validatetype 為custom 時需填寫對應驗證規則

clear：表示表單中 清空按鈕開關

#fetch-url：有此屬性則可以開啟非同步請求資料邏輯，元件會並根據資料傳回狀態來按submit-success，submit-error區塊中的範本刷新局部資訊。

這篇文章就是關於MIP中表單元件的基本使用介紹，簡單易學，希望對需要的朋友有幫助！

以上是Mip中表單元件怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！