表单验证 手机端弹框形式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/layer.css">
	<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript" src='js/layer.js'></script>
</head>
<body>
	<form class="form" action="" id="baiseForm">
		手机号
		<input type="text" name="phone">
		<input type="submit" name="" value="提交">
	</form>
	<script type="text/javascript">
		 // 验证表单
        $('#baiseForm').validate({
				rules:{
					phone: {
						required:true,
						digits:true,
						max:300
					}
					
				 },
			   messages :{
			   		phone: {
						required:'不能为空',
						digits:'必须是整数',
						max:'增多为300秒'
					}
				},
				/*错误提示*/
				showErrors : function(errorMap, errorList) {  
				    var msg = "";  
				    $.each(errorList, function(i, v) {  
				     msg += (v.message + "\r\n");  
				    });  
				    if (msg != ""){
				       layer.open({
						    content: msg
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						 })
				   } 
			   },
			   /* 失去焦点时不验证 输入时 */  
			   onfocusout : false,
			   onkeyup:false, 
		});
	    
	</script>
</body>
</html>

  

posted @ 2017-04-21 10:55  GinJiong  阅读(1278)  评论(0编辑  收藏  举报