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

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

首先，导入插件：

rush:js;"> nofollow" rel="stylesheet" media="screen">

rush:js;"> bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api：http://bv.doc.javake.cn/api/

jsp：

rush:js;">

名称

名称" name="company_name"/>

mputer_room">机房

mputer_room" type="text" placeholder="请输入机房"/>

名称

名称"/>

odol-footer" id="button_sub">

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

js：

rush: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])$/,message: '设备IP不合法' } } },} }) });

rush:js;"> $("#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校验：

rush:js;"> $("#equipment_ip").blur(function(){ var reg = /^(\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提交功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/ajax/41558.html

bootstrap bootstrap bootstrap模态框表单 validator