欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-28 11:34:33
效果: jsp页面:

效果:

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框架下实现表单提交数据重复验证,希望对大家有所帮助