前言

• ruoyi 4.6.0

ruoyi 使用 jQuery Validate插件

ruoyi 使用 jQuery Validate插件實現(xiàn)表單驗證功能。參考文檔有：

• https://doc.ruoyi.vip/ruoyi/document/qdsc.html#表單校驗
• https://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate
• https://jqueryvalidation.org/documentation/

ruoyi 驗證表單分析

下面是從添加店鋪頁面摘取的部分代碼：

<form class="form-horizontal m" id="form-shop-add"> </form> <script th:inline="javascript">var prefix = ctx + "shop/shop"$("#form-shop-add").validate({focusCleanup: true});function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-shop-add').serialize());}} </script>

• 初始化 jQuery Validate

$("#form-shop-add").validate({focusCleanup: true});

• 通常，添加頁面沒有submit按鈕的。所以無法submit表單，也無法觸發(fā)jQuery Validate驗證。因此單獨添加了submitHandler方法。

function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-shop-add').serialize());}}

• 通常，使用$.modal.open()、$.modal.openFull()打開頁面。在$.modal.open()、$.modal.openFull()打開的頁面中，會添加確定和關(guān)閉按鈕。在確定按鈕點擊時，會調(diào)用submitHandler方法。
• $.validate.form() 觸發(fā)jQuery Validate驗證
• $.operate.save() 調(diào)用 prefix + "/add" 地址保存數(shù)據(jù)$('#form-shop-add').serialize()。如果保存成功，則關(guān)閉彈框，并提示成功。

驗證隱藏表單

<form class="form-horizontal m" id="form-shop-add"> <input name="swiperPics" id="swiperPics" class="form-control" type="hidden" th:value="*{swiperPics}"> </form>

較好的做法為：

function submitHandler() {if ($.validate.form()) {if($.common.isEmpty($("#swiperPics").val())) {layer.alert('選擇并上傳輪播圖'); return;}$.operate.save(prefix + "/add", $('#form-shop-add').serialize());} }

省事兒的做法為：

$("#form-shop-add").validate({focusCleanup: true,ignore: "" /*覆蓋掉jQuery validate默認值 ignore: ":hidden" */messages: {swiperPics: "選擇并上傳輪播圖" /*指定提示消息內(nèi)容*/}});

總結(jié)

以上是生活随笔為你收集整理的ruoyi 验证表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。