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 相关文章推荐
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
详解vue中组件参数
Jul 09 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Vue实现简单的跑马灯
May 25 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中文乱码的解决方法
2006/12/17 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php字符串过滤与替换小结
2015/01/26 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python学生管理系统的实现
2020/04/05 Python
Pycharm中如何关掉python console
2020/10/27 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
公司会计主管岗位责任制
2014/03/01 职场文书
买卖协议书范本
2014/04/21 职场文书
论文评语大全
2014/04/29 职场文书
面试自我评价范文
2014/09/17 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫