前言

• ruoyi 4.6.0

ruoyi 使用 jQuery Validate插件

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

• 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表單，也無法觸發jQuery Validate驗證。因此單獨添加了submitHandler方法。

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

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

驗證隱藏表單

<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: "選擇并上傳輪播圖" /*指定提示消息內容*/}});

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。