前言

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 验证表单相关推荐

JS 验证表单不能为空
开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 JS 验证表单不能为空的简单demo,先看效果图实现代码 <!--index.wxm ...
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的以前我们都是用js手动验证现在可以通过这个插件直接调 ...
企业级 SpringBoot 教程（十九）验证表单信息
这篇文篇主要简述如何在springboot中验证表单信息.在springmvc工程中,需要检查表单信息,表单信息验证主要通过注解的形式. 构建工程创建一个springboot工程,由于用到了 web ...
ExtJS学习笔记3：载入、提交和验证表单
载入数据 1.比較好用的设置form数据的方法: formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]); 当中id值为for ...
[翻译-ASP.NET MVC]Contact Manager开发之旅迭代3 - 验证表单
本翻译系列为asp.net mvc官方实例教程.在这个系列中,Stephen Walther将演示如何通过ASP.NET MVC framework结合单元测试.TDD.Ajax.软件设计原则及设计模 ...
jQuery用面向对象的思想来编写验证表单的插件
本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...
JavaScript 验证表单不为空和获取select下拉列表的值和文本
1.验证表单不为空 var hasform = { "Name": "名字", "Id_card": &qu ...
Vant-UI 表单组件（Field组件）：验证表单元素表单提交 - 踩坑篇
Vant-UI 表单组件(Field组件):验证表单元素&&表单提交: 示例截图 · 如下: 示例 · 详细代码 · 如下: <template><div class ...
jQuery验证表单插件——jquery-validation
jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your ex ...

ruoyi 验证表单

前言

ruoyi 使用 jQuery Validate插件

ruoyi 验证表单分析

验证隐藏表单

ruoyi 验证表单相关推荐

最新文章

热门文章