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


Posted in Javascript onFebruary 17, 2017

效果图:

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

如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法。

首先,导入插件:

<link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen">
<script src="<%=basePath %>bootstrap/js/bootstrapValidator.min.js"></script> 
<script src="<%=basePath %>bootstrap/js/bootstrapValidator.zh_CN.js"></script> 
bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api:http://bv.doc.javake.cn/api/

jsp:

<div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog" role="document"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel_add">新增</h4> 
    </div> 
    <div class="modal-body" style="height:680px;"> 
      <form id="defaultForm" class="form-horizontal"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="company_name">公司名称</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_name" type="text" placeholder="请输入公司名称" name="company_name"/> 
        </div> 
        <label class="col-sm-2 control-label" for="company_id">公司id</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="company_id" type="text" placeholder="请输入公司id" name="company_id"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="computer_room">机房</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="computer_room" type="text" placeholder="请输入机房"/> 
        </div> 
        <label class="col-sm-2 control-label" for="cabinet">机柜</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="cabinet" type="text" placeholder="请输入机柜"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_type">设备类型</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_type" type="text" placeholder="请输入设备类型"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_name">设备名称</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_name" type="text" placeholder="请输入设备名称"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_ip">设备ip</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_ip" type="text" placeholder="请输入设备ip" name="equipment_ip" /> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_brand">设备品牌</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_brand" type="text" placeholder="请输入设备品牌"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_model">设备型号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_model" type="text" placeholder="请输入设备型号"/> 
        </div> 
        <label class="col-sm-2 control-label" for="shelf_position">上架位置</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="shelf_position" type="text" placeholder="请输入上架位置"/> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label" for="equipment_sn">设备SN号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_sn" type="text" placeholder="请输入设备SN号"/> 
        </div> 
        <label class="col-sm-2 control-label" for="equipment_pn">设备PN号</label> 
        <div class="col-sm-4"> 
         <input class="form-control" id="equipment_pn" type="text" placeholder="请输入设备PN号"/> 
        </div> 
       </div> 
      </form> 
      </div> 
     <div class="modol-footer" id="button_sub"> 
      <button type="reset" id="btn_reset" class="btn btn-default"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>重置</button> 
      <button type="button" id="" name="submit" class="btn btn-primary submit_review"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>提交审核</button> 
     </div> 
   </div> 
  </div> 
 </div>

我这边没有使用表单提交验证,而已点击button按钮,Ajax提交,注意一下。

js:

$(function(){/* 文档加载,执行一个函数*/ 
// $(".submit_review").attr({"disabled":"disabled"}); 
 $('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: {/*输入框不同状态,显示图片的样式*/ 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: {/*验证*/ 
     company_name: {/*键名username和input name值对应*/ 
      validators: { 
       notEmpty: {/*非空提示*/ 
        message: '公司名称不能为空' 
       }, 
//       stringLength: {/*长度提示*/ 
//        min: 6, 
//        max: 30, 
//        message: '用户名在6到30之间' 
//       }/*最后一个没有逗号*/ 
      } 
     }, 
     company_id: { 
      validators: { 
       notEmpty: { 
        message: '公司ID不能为空' 
       }, 
      } 
     }, 
     equipment_ip: { 
      validators: { 
       notEmpty: { 
        message: '设备IP不能为空' 
       }, 
       regexp: { 
        regexp: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, 
        message: '设备IP不合法' 
         } 
      } 
     }, 
    } 
  }) 
 });
$("#btn_reset").click(function(event) { 
  /* Act on the event */ 
  $('#defaultForm').data('bootstrapValidator').resetForm(true); 
 }); 
 $("body").on('click', '#btn_submit_add', function(event) { 
  /* Act on the event */ 
  $('#defaultForm').bootstrapValidator('validate'); 
  var flag = $("#defaultForm").data('bootstrapValidator').isValid(); 
  if (!flag) { 
   toastr.error("填写有误,请重新填写!"); 
  } else { 
   $.post('addEquipmentInfoCheck.action', { 
    "equipmentInfoCheck.companyId": $("#company_id").val(), 
    "equipmentInfoCheck.companyName": $("#company_name").val(), 
    "equipmentInfoCheck.machineRoom": $("#computer_room").val(), 
    "equipmentInfoCheck.equipmentCabinet": $("#cabinet").val(), 
    "equipmentInfoCheck.deviceType": $("#equipment_type").val(), 
    "equipmentInfoCheck.deviceName": $("#equipment_name").val(), 
    "equipmentInfoCheck.deviceIp": $("#equipment_ip").val(), 
    "equipmentInfoCheck.deviceBrand": $("#equipment_brand").val(), 
    "equipmentInfoCheck.deviceModel": $("#equipment_model").val(), 
    "equipmentInfoCheck.position": $("#shelf_position").val(), 
    "equipmentInfoCheck.deviceSn": $("#equipment_sn").val(), 
    "equipmentInfoCheck.devicePn": $("#equipment_pn").val(), 
    "equipmentInfoCheck.state":1 
   }, function(data, textStatus, xhr) { 
    /*optional stuff to do after success */ 
    if (textStatus == "success") { 
     // e.preventDefault(); 
     $('#defaultForm').data('bootstrapValidator').resetForm(true); 
     $("#myModal_add").modal('hide'); 
     toastr.success("提交成功"); 
    }else{ 
     $("#myModal_add").modal('hide'); 
     toastr.error("提交失败"); 
    } 
   }); 
  } 
 });

OK,至此模态框验证,提交就完成了~

下面附上原始js校验:

$("#equipment_ip").blur(function(){ 
 var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ ;  
 var flag=reg.test($(this).val()); 
 if(!flag){ 
 toastr.error("IP不合法,请重新输入"); 
 $(this).val(""); 
 } 
);

以上所述是小编给大家介绍的bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Vue自定义指令详解
Jul 28 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 #Javascript
jQuery实现弹幕效果
Feb 17 #Javascript
Ajax基础知识详解
Feb 17 #Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 #Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 #Javascript
原生js实现日期计算器功能
Feb 17 #Javascript
Vue自定义指令拖拽功能示例
Feb 17 #Javascript
You might like
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
Yii使用技巧大汇总
2015/12/29 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
深入理解vuex2.0 之 modules
2017/11/20 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python实现学生成绩管理系统
2020/04/05 Python
python实现list由于numpy array的转换
2018/04/04 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
采购部部长岗位职责
2014/02/06 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
财务管理专业自荐书
2014/09/02 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript