当前位置: 首页 > 编程笔记 >

BootStrap+Mybatis框架下实现表单提交数据重复验证

曾洲
2023-03-14
本文向大家介绍BootStrap+Mybatis框架下实现表单提交数据重复验证,包括了BootStrap+Mybatis框架下实现表单提交数据重复验证的使用技巧和注意事项,需要的朋友参考一下

效果:


jsp页面:

<form class="form-horizontal lui-tj-bd" id="dbc_code_add_form" method="post">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="tabbable">
<div class="space-12"></div>
<div class="profile-user-info profile-user-info-striped">
<div class="profile-info-row">
<div class="profile-info-name" > 版本号<font color="red">*</font></div>
<div class="profile-info-value">
<input type="hidden" value="${list.id}" name="id" class="col-xs-12 col-sm-9" />
<input type="hidden" value="${list.versionCode}" id="oldversionCode" name="oldversionCode" class="col-xs-12 col-sm-9" />
<input type="text" value="${list.versionCode}" id="versionCode" name="versionCode" class="col-xs-12 col-sm-9" />
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" > 版本名称<font color="red">*</font></div>
<div class="profile-info-value">
<input type="hidden" value="${list.versionName}" id="oldversionName" name="oldversionName" class="col-xs-12 col-sm-9" />
<input type="text" value="${list.versionName}" id="versionName" name="versionName" class="col-xs-12 col-sm-9"/>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" > 上传应用程序<font color="red">*</font></div>
<div class="profile-info-value">
<input type="file" name="file_upload" id="file_upload" />
</div>
</div>
<div class="profile-info-row ">
<div class="profile-info-name"> 下载地址<font color="red">*</font> </div>
<div class="profile-info-value">
<span class="editable editable-click">
<input type="text" id="downloadUrl" name="downloadUrl" class="col-xs-12 col-sm-9" readonly="readonly" value="${list.downloadUrl}" />
</span>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name" > 更新备注<font color="red">*</font></div>
<div class="profile-info-value">
<textarea class="col-sm-9 col-xs-12 " rows="5" id="updateLog" name="updateLog" >${list.updateLog}</textarea>
</div>
</div>
</div>
<div class="space-24"></div>
<div>
<div class=" col-md-offset-2 col-md-9 col-xs-12">
<div class=" col-xs-6">
<button class="btn btn-sm btn-success" type="button" id="saveButton2" style="float:right;" onclick="tobaocun()">
<i class="ace-icon fa fa-check "></i>保存
</button>
</div>
<button class="btn btn-sm btn-purple" type="reset">
<i class="ace-icon fa fa-undo "></i> 重置
</button>
</div>
</div>
</div>
</div>
</div>
</form>

js:

ace.load_ajax_scripts(scripts, function () {
 jQuery(function ($) {
 //验证
  $("#dbc_code_add_form").validate({
 rules: {
 'versionCode': {
 required: true,
 maxlength:20,
  remote:{
 type:"post",
 dataType:"json",
 data:{versionCode:function () { return $("#versionCode").val();},
 oldversionCode:function () { return $("#oldversionCode").val();}
 },
 url:"${base}/admin/road/app/validateversionCode.do"
   }
 },
 'versionName': {
 required: true,
 maxlength:40,
 remote:{
 type:"post",
 dataType:"json",
 data:{versionName:function () { return $("#versionName").val();},
 oldversionName:function () { return $("#oldversionName").val();}
 },
 url:"${base}/admin/road/app/validateversionName.do"
   }
 },
 'updateLog': {
 required: true,
 maxlength:125
 }
 },
 messages:{
 'versionCode':{
 required: "<font color='#d16e6c'>必填</font>",
 remote:"<font color='#d16e6c'>版本号重复</font>",
 maxlength:"<font color='#d16e6c'>最大不能超过10位</font>"
 },
 'versionName':{
 required: "<font color='#d16e6c'>必填</font>",
 remote:"<font color='#d16e6c'>版本名称重复</font>",
 maxlength:"<font color='#d16e6c'>最大不能超过40位</font>"
 },
 'updateLog':{
 required: "<font color='#d16e6c'>必填</font>",
 maxlength:"<font color='#d16e6c'>最大不能超过120位</font>"
 }
 }
 });
 });
});

controller控制层:

@RequestMapping(value="/validateversionCode",method=RequestMethod.POST)
 @ResponseBody
 public boolean validateversionCode(@RequestParam("versionCode")String versionCode,
 @RequestParam("oldversionCode")String oldversionCode){
 if(!versionCode.equals(oldversionCode)||StringUtils.isEmpty(oldversionCode)){
 boolean isOk = appversionService.validateversionCode(versionCode);
 return isOk;
 }
 return true;
 }
@RequestMapping(value="/validateversionName",method=RequestMethod.POST)
 @ResponseBody
 public boolean validateversionName(@RequestParam("versionName")String versionName,
 @RequestParam("oldversionName")String oldversionName){
 if(!versionName.equals(oldversionName)||StringUtils.isEmpty(oldversionName)){
 boolean isOk = appversionService.validateversionName(versionName);
 return isOk;
 }
 return true;
 }

service服务层

@Override
public boolean validateversionCode(String versionCode){
int count = dbcAppVersionMapper.validateversionCode(versionCode);
return (count>0)?false:true;
}
@Override
public boolean validateversionName(String versionName){
int count = dbcAppVersionMapper.validateversionName(versionName);
return (count>0)?false:true;
}

dao 层

int validateversionCode(@Param("versionCode")String versionCode);
int validateversionName(@Param("versionName")String versionName);

mapper.xml

<!-- APP版本名称验证-->
 <select id="validateversionName" resultType="java.lang.Integer">
select 
count(id)
from dbc_app_version
where VERSION_NAME=#{versionName}
</select>
<!-- APP版本号验证-->
 <select id="validateversionCode" resultType="java.lang.Integer">
select 
count(id)
from dbc_app_version
where VERSION_CODE=#{versionCode}
</select>

关于bootstrap专题大家可以参考下:

bootstrap 组件

以上所述是小编给大家介绍的BootStrap框架下实现表单提交数据重复验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍Yii框架表单提交验证功能分析,包括了Yii框架表单提交验证功能分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Yii框架表单提交验证功能。分享给大家供大家参考,具体如下: 一、前端提交的三种方式 前面已经提出,表单提交一共只有三种方式。 1. 前端原生html (1)原生html标签 首先,直接使用html标签的input,a等; 其次,使用css进行布局。 再次,使用

  • 本文向大家介绍php 防止表单重复提交两种实现方法,包括了php 防止表单重复提交两种实现方法的使用技巧和注意事项,需要的朋友参考一下 php 防止表单重复提交 由于网络原因,经常出来点了提交按钮,网页没有反应,而进行再次点击。这样就导致后台收到两次提交,从而进行两次处理,本文章向大家介绍php 防止表单重复提交的几种方法 1、前端解决 方法一: 可以通过前端来解决。当用户点了提交按钮之后,先使用

  • 本文向大家介绍防止Layui form表单重复提交的实现方法,包括了防止Layui form表单重复提交的实现方法的使用技巧和注意事项,需要的朋友参考一下 在提交表单数据时,提交按钮为 submit 类型,以layui为js框架时,会重复提交表单数据,为防止这一情况,有效的做法是: 在<form>里面,加上 lay-filter="formConfig" , οnsubmit="return fa

  • 本文向大家介绍基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片),包括了基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)的使用技巧和注意事项,需要的朋友参考一下 我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码。 HTML的代码: JS代码: 后台一般处理程序的代码: 上传图片的一般处理程序: 提交表单

  • 本文向大家介绍vue+elementUI 复杂表单的验证、数据提交方案问题,包括了vue+elementUI 复杂表单的验证、数据提交方案问题的使用技巧和注意事项,需要的朋友参考一下 当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显

  • 本文向大家介绍PHP实现登陆表单提交CSRF及验证码,包括了PHP实现登陆表单提交CSRF及验证码的使用技巧和注意事项,需要的朋友参考一下 1、表单提交,并将其提交到本页 (1) form 属性method为post方法,修改路由,使其接收post、get的请求 Route::any('/admin/login','Admin\LoginController@login'); (2)LoginCo