jquery validate

最新推荐文章于 2024-10-07 09:24:46 发布

pengfeifei26

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量106

点赞数

分类专栏： jquery插件文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/pengfeifei26/article/details/84685463

版权

jquery插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="jquery.validate.js"></script>
	<script type="text/javascript" src="common-validate.js"></script>

	<script type="text/javascript">
	$().ready(function() {
		$("#myform").validate({

			debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
			focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
            onkeyup: false,   
            submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                    alert("提交表单");   
                    form.submit();   //提交表单   
           },   



			// 验证规则 
			rules:{ 
				userName: { 
				required: true, 
				userName: true, 
				rangelength: [5,10], 
					remote:{
						type: "post",
						url: "http://localhost/gctappservice/placard/checkUserName",
						data: { 
							userName: function() { 
								console.log("nnn==========" + $("#userName").val())
								return $("#userName").val();
							},
						},
						jsonp:'jsonpCallback', 
						dataType: 'jsonp',
						dataFilter: function(data, type) { 
								console.log("data=="+data);
							if (data == "true"){
								console.log("data11==="+data);
								return true;
							}else{
								console.log("data22==="+data);
								return false;
							}
						}
					}

				} ,

				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},

				mobile: { 
				required: true, 
				isMobile: true, 
				minlength:11,
				maxlength: 11
				} 


			}, 
			/* 设置错误信息 */ 
			messages: { 
				userName: { 
				required: "请填写用户名", 
				rangelength: "用户名必须在5-10个字符之间",
				remote: "用户名已存在"
				},

				password: {
					required: "请输入密码",
					minlength: "密码不能小于5个字符"
				},
				confirm_password: {
					required: "请输入确认密码",
					minlength: "确认密码不能小于5个字符",
					equalTo: "两次输入密码不一致不一致"
				},

				mobile: { 
				required: "请填写手机号", 
				maxlength:"长度不能小于11",
				maxlength:"长度不能大于11"
				} 
			}, 

		  //errorPlacement: function(error, element) {  
            //  error.appendTo( element.parent("td").next("td") );  
		 //} 

		success: function(label) {
		 // set   as text for IE
				//label.html(" ").addClass("checked");
			 label.addClass("valid");
		}

		});
	});
</script>

<style type="text/css">  
input.error { border: 1px solid red; }
label.error{
margin-left: 10px;
padding-left: 20px;
color: red;
background:url("11.png") left no-repeat; 
}
label.valid{
background:url("22.png") left no-repeat; 
}

</style>  
 </head>

 <body>	
	<form name="myform" id="myform" method = "post">
		用户名：<input type="text" name ="userName" id="userName"></input></br>
		密码：<input type="password" name ="password" id="password"></input></br>
		密码：<input type="password" name ="confirm_password" id="confirm_password"></input></br>
		手机号：<input type="text" name ="mobile" id="mobile"></input></br>
		<input type="submit" name ="submit" id="submit" value="submit"></input>
	</form>


  <hr>
 </body>
</html>