ruoyi 验证表单

前言

• 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: "选择并上传轮播图" /*指定提示消息内容*/
	    }
	});