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框架下实现表单提交数据重复验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"

  • 基于BootStrap与jQuery.validate实现表单提交校验功能

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 直接看demo:http://www.suchso.com/code/bootstrapvalidate/ 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极

  • 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="t

  • PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】

    本文实例讲述了PHP实现表单提交数据的验证处理功能.分享给大家供大家参考,具体如下: 防XSS攻击代码: /** * 安全过滤函数 * * @param $string * @return string */ function safe_replace($string) { $string = str_replace('%20','',$string); $string = str_replace('%27','',$string); $string = str_replace('%2527',

  • 解决Layui 表单提交数据为空的问题

    坑的外观 最近用了一段时间Layui作为项目后台管理模块的前端框架,感觉还是挺好用的. 今天踩了个坑,就是使用layui表单提交时,提交的数据为空. 例如,layer.msg(JSON.stringify(data.field));这句代码执行后,页面显示为空对象. <form class="layui-form" action=""> <div class="layui-form-item"> <label cla

  • EasyUI在表单提交之前进行验证的实例代码

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,EasyUi中form模块中的from('validate')方法会自行对我们指定的表单中required=true等需要验证的的元素进行验证,但有不通过的元素时返回一个false; $("#form").form({ url: 'login.ashx', onSubmit: function

  • EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,EasyUi中form模块中的from('validate')方法会自行对我们指定的表单中required=true等需要验证的的元素进行验证,但有不通过的元素时返回一个false; $("#form1").form({ url: 'login.ashx', onSubmit: functio

  • 在表单提交前进行验证的几种方式整理

    在表单提交前进行验证的几种方式 . 在Django中,为了减轻后台压力,可以利用JavaScript在表单提交前对表单数据进行验证.下面提供了有效的几种方式(每个.html文件为一种方式). formpage1.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

  • python Django框架实现自定义表单提交

    除了使用Django内置表单,有时往往我们需要自定义表单.对于自定义表单Post方式提交往往会带来由CSRF(跨站请求伪造)产生的错误"CSRF verification failed. Request aborted." 本篇文章主要针对"表单提交"和"Ajax提交"两种方式来解决CSRF带来的错误 一.表单提交 Template: <!DOCTYPE html> <html lang="en"> &

  • Asp.Net模拟表单提交数据和上传文件的实现代码

    如果你需要跨域上传内容到另外一个域名并且需要获取返回值,使用Asp.Net的作为代理是最好的办法,要是客户端直接提交到iframe中,由于跨域是无法用javascript获取到iframe中返回的内容的.此时需要在自己的网站做一个动态页作为代理,将表单提交到动态页,动态页负责将表单的内容使用WebClient或HttpWebRequest将表单数据再上传到远程服务器,由于在服务器端进行操作,就不存在跨域问题了. WebClient上传只包含键值对的文本信息示例代码: 复制代码 代码如下: str

  • ext form 表单提交数据的方法小结

    EXT的form表单ajax提交(默认提交方式) 复制代码 代码如下: 1. function login(item) {    2.    3. if (validatorForm()) {    4. // 登录时将登录按钮设为disabled,防止重复提交    5. this.disabled = true;    6.    7. // 第一个参数可以为submit和load    8. formPanl.form.doAction('submit', {    9.    10. u

随机推荐