formValidator表单验证插件在IE浏览器下bootstrap弹出层中无法验证

haiyun2600 2015-12-02 04:39:02



html代码
<!-- 添加联系人弹出框 -->
<div class="modal fade" id="addConnectPerson" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" disabled="disabled">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" id="myModalLabel">
添加联系人
</h4>
</div>

<div class="modal-body">
<form action="" class="form-horizontal" role="form" id="form4">
<div class="form-group">

<label class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-6">

<input type="text" name="conName" id="conName" class="form-control">
</div>
<div class="col-sm-4" id="conNameTip"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">职位:</label>
<div class="col-sm-6">
<input type="text" name="conPosition" id="conPosition" class="form-control">
</div>
<div class="col-sm-4" id="conPositionTip"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">电话:</label>
<div class="col-sm-6">
<input type="text" name="conPhone" id="conPhone" class="form-control">
</div>
<div class="col-sm-4" id="conPhoneTip"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">公共邮箱:</label>
<div class="col-sm-6">
<input type="text" name="conPublicEmail" id="conPublicEmail" class="form-control">
</div>
<div class="col-sm-4" id="conPublicEmailTip"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">私人邮箱:</label>
<div class="col-sm-6">
<input type="text" name="conPrivateEmail" id="conPrivateEmail" class="form-control">
</div>
<div class="col-sm-4" id="conPrivateEmailTip"></div>
</div>

<div class="form-group">
<div align="center">
<button type="submit" class="btn btn-info" >添加 </button>
    
<button type="button" class="btn btn-default" data-dismiss="modal"> 取消</button>
</div>
</div>

</form>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


js代码
//添加联系人验证
$.formValidator.initConfig({validatorGroup:"4",formID:"form4",debug:true,
onSuccess:function(){
$("#addConnectPerson").modal("hide");


//添加联系人操作
var data = $("#form4").serialize();
$.ajax({
url : "../survey/update/addConnectPerson.do", //后台处理程序
type : 'post', //数据发送方式
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
dataType:'text', //接受数据格式
data : data, //要传递的数据,
success : function(json){
if(json=="0"){
alert("联系人添加失败，请稍候再试！");
}else if(json=="2"){
alert("添加联系人失败，最多只能添加5个联系人！");
}else{

var connectPersonCount = parseInt($("#connectPersonCount").text());

$("#connectPersonCount").text(connectPersonCount+1);

var jsonData = eval(json);

$("#connectPersonTable tbody").append("<tr><td><input type=\"hidden\" value='"+jsonData[0].id+"'/><input type=\"hidden\" value='"+jsonData[0].privateEmail+"'/>"+jsonData[0].name+"</td><td>"+jsonData[0].publicEmail+"</td><td>"+jsonData[0].position+"</td><td>"+jsonData[0].telephone+"</td> <td><button class=\"btn btn-info btn-sm con_per_del\" onclick=\"delConPer(this)\">删除</button>   <button class=\"btn btn-info btn-sm con_per_upd\" onclick=\"updConPer(this)\">修改</button></td></tr>")


alert("联系人添加成功！");

}

return false;
}
});
},
onError:function(){alert("您的信息填写有误！")}});
$("#conName").formValidator({validatorGroup:"4",onShow:"请填写联系人姓名",onFocus:"姓名:3~20个字符"})
.inputValidator({min:3,max:20,onError:"姓名长度有误"
})
$("#conPosition").formValidator({validatorGroup:"4",onShow:"请填写联系人职位",onFocus:"电话:5~20个字符"})
.inputValidator({min:5,max:20,onError:"职位长度长度有误"
})
$("#conPhone").formValidator({validatorGroup:"4",onShow:"请填写联系人电话",onFocus:"电话:5~20个字符"})
.inputValidator({min:5,max:20,onError:"电话长度有误"
})
$("#conPublicEmail").formValidator({validatorGroup:"4",onShow:"请填写联系人公共邮箱，",onFocus:"公共邮箱:6~100个字符"})
.inputValidator({min:6,max:100,onError:"邮箱长度不符合"
}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"您输入的邮箱格式不正确"})
$("#conPrivateEmail").formValidator({validatorGroup:"4",onShow:"请填写联系人私人邮箱，",onFocus:"私人邮箱:6~100个字符"})
.inputValidator({min:6,max:100,onError:"邮箱长度不符合"
}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"您输入的邮箱格式不正确"})


以上在谷歌和火狐下都没问题，但是在IE下就无法验证，具体：失去光标不提示验证结果，输入框也无法复制粘贴，最后表单提交时验证没问题


...全文
146 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
haiyun2600 2015-12-03
  • 打赏
  • 举报
 回复
哪位大侠 帮小弟看看
haiyun2600 2015-12-02
  • 打赏
  • 举报
 回复 
//添加联系人验证
	$.formValidator.initConfig({validatorGroup:"4",formID:"form4",debug:true,
	    onSuccess:function(){
	    	$("#addConnectPerson").modal("hide");

	    	
	    	//添加联系人操作
	    	var data = $("#form4").serialize();
    		$.ajax({
    			url : "../survey/update/addConnectPerson.do", //后台处理程序
    			type : 'post', //数据发送方式
    			contentType: 'application/x-www-form-urlencoded; charset=utf-8',
    			dataType:'text',  //接受数据格式
    			data : data,     //要传递的数据,
    			success : function(json){
    				if(json=="0"){
    					alert("联系人添加失败，请稍候再试！");
    				}else if(json=="2"){
    					alert("添加联系人失败，最多只能添加5个联系人！");
    				}else{
    					
    					var connectPersonCount = parseInt($("#connectPersonCount").text());
    					
    					$("#connectPersonCount").text(connectPersonCount+1);
    					
    					var jsonData = eval(json); 
    					
    					$("#connectPersonTable tbody").append("<tr><td><input type=\"hidden\" value='"+jsonData[0].id+"'/><input type=\"hidden\" value='"+jsonData[0].privateEmail+"'/>"+jsonData[0].name+"</td><td>"+jsonData[0].publicEmail+"</td><td>"+jsonData[0].position+"</td><td>"+jsonData[0].telephone+"</td> <td><button class=\"btn btn-info btn-sm con_per_del\" onclick=\"delConPer(this)\">删除</button>   <button class=\"btn btn-info btn-sm con_per_upd\" onclick=\"updConPer(this)\">修改</button></td></tr>")
    					
    					
    					alert("联系人添加成功！");
    					
    				}
    				
    				return false;
    			}
    		});
	    },
	    onError:function(){alert("您的信息填写有误！")}});
	$("#conName").formValidator({validatorGroup:"4",onShow:"请填写联系人姓名",onFocus:"姓名:3~20个字符"})
	.inputValidator({min:3,max:20,onError:"姓名长度有误"
	})
	$("#conPosition").formValidator({validatorGroup:"4",onShow:"请填写联系人职位",onFocus:"电话:5~20个字符"})
	.inputValidator({min:5,max:20,onError:"职位长度长度有误"
	})
	$("#conPhone").formValidator({validatorGroup:"4",onShow:"请填写联系人电话",onFocus:"电话:5~20个字符"})
	.inputValidator({min:5,max:20,onError:"电话长度有误"
	})
	$("#conPublicEmail").formValidator({validatorGroup:"4",onShow:"请填写联系人公共邮箱，",onFocus:"公共邮箱:6~100个字符"})
	.inputValidator({min:6,max:100,onError:"邮箱长度不符合"
	}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"您输入的邮箱格式不正确"})
	$("#conPrivateEmail").formValidator({validatorGroup:"4",onShow:"请填写联系人私人邮箱，",onFocus:"私人邮箱:6~100个字符"})
	.inputValidator({min:6,max:100,onError:"邮箱长度不符合"
	}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"您输入的邮箱格式不正确"})
haiyun2600 2015-12-02
  • 打赏
  • 举报
 回复 
<!-- 添加联系人弹出框 -->	
<div class="modal fade" id="addConnectPerson" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog" disabled="disabled">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" 
               aria-hidden="true">×
            </button>
            <h4 class="modal-title" id="myModalLabel">
              	 添加联系人
            </h4>
         </div>
        
         <div class="modal-body">
           	<form action="" class="form-horizontal" role="form" id="form4">
           		<div class="form-group">
           		
           			<label class="col-sm-2 control-label">姓名:</label>
           			<div class="col-sm-6">
       
           				<input type="text" name="conName" id="conName"  class="form-control">
           			</div>
           			<div class="col-sm-4" id="conNameTip"></div>
           		</div>
           		<div class="form-group">
           			<label class="col-sm-2 control-label">职位:</label>
           			<div class="col-sm-6">
           				<input type="text" name="conPosition" id="conPosition"  class="form-control">
           			</div>
           			<div class="col-sm-4" id="conPositionTip"></div>
           		</div>
           		<div class="form-group">
           			<label class="col-sm-2 control-label">电话:</label>
           			<div class="col-sm-6">
           				<input type="text" name="conPhone" id="conPhone"  class="form-control">
           			</div>
           			<div class="col-sm-4" id="conPhoneTip"></div>
           		</div>
           		<div class="form-group">
           			<label class="col-sm-2 control-label">公共邮箱:</label>
           			<div class="col-sm-6">
           				<input type="text" name="conPublicEmail" id="conPublicEmail"  class="form-control">
           			</div>
           			<div class="col-sm-4" id="conPublicEmailTip"></div>
           		</div>
           		<div class="form-group">
           			<label class="col-sm-2 control-label">私人邮箱:</label>
           			<div class="col-sm-6">
           				<input type="text" name="conPrivateEmail" id="conPrivateEmail"  class="form-control">
           			</div>
           			<div class="col-sm-4" id="conPrivateEmailTip"></div>
           		</div>
           		
           		<div class="form-group">
           			<div align="center">
           				<button type="submit" class="btn btn-info" >添加 </button>
           				    
			            <button type="button" class="btn btn-default"  data-dismiss="modal"> 取消</button>
           			</div>
           		</div>
           	
           	</form>
         </div>
        
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
2021-03-12
jQuery 强大的jQuery弹出层插件–BlockUI https://blog.csdn.net/ATFWUS/article/details/106157480 jQuery UI 常用插件: 　1.dialog插件 　2.tabs插件 　3.menu插件 　4.autocomplete插件 　5.lazyload插件：...
jquery 常用插件集合
1. Simple Effects for Drop-Down Lists 　一个 jQuery 插件用于将普通的 select 控件转成一个带有一些简单扩展效果的下拉...它能够使用任何引擎（bootstrap、jquery-ui、jquery），并且包含弹出式和内联模式。
前端组件、插件汇总
HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法 cssFx - 为CSS3自动生成浏览器前缀 -prefix-free - Break free from CSS prefix hell ieBetter.js - make ie browser like a morden browser main for ie6~...
javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node....jQuery图表插件-jQchart ...跨浏览
javaScript开源大全
javascript开源大全 转自：http://www.cnblogs.com/yiliweichinasoft/p/3819699.html javascript开源大全 ...可视化HTML编辑器-CKEditor ...网页开发FireFox插件-Firebug 服...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章