表单验证手机端弹框形式

最新推荐文章于 2019-09-23 17:00:01 发布

weixin_30757793

最新推荐文章于 2019-09-23 17:00:01 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/GinJiong/p/6742482.html

版权

<!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>

转载于:https://www.cnblogs.com/GinJiong/p/6742482.html

weixin_30757793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证手机端弹框形式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/layer.css">...
复制链接

扫一扫