jquery.validate ajax 提交验证

最新推荐文章于 2025-06-21 10:46:16 发布

原创最新推荐文章于 2025-06-21 10:46:16 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #ViewUI

JQuery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的表单验证示例，包括登录表单的基本验证规则及提交处理逻辑。验证规则覆盖了必填项检查和最小长度限制，并通过AJAX实现了表单提交功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>TestM</title>
<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">

$(function(){
	
	$("#testFormLogin").validate({
		rules : {
			loginName: {
				required: true,
				minlength: 5
			},
			password :{
				required : true,
			}
			
		},
		messages:{
			loginName : {
				required : "login name filed is required",
				minlength : "min length is 5 charactor "
			},
			password :{
				required:"password filed is required"
			}
		}
	
		
	});
	
	$("#testFormLogin").submit(function() {
		
		var isValidate = 1;
		$("#testFormLogin").find("input").each(function(){
			isValidate = isValidate & $(this).valid();
		})
		if(isValidate){
			var url = "testLoginForm.do";
			$.ajax({
				url : url,
				dateType: "json",
				type:"post",
				data : $('#testFormLogin').serialize(),
				success:function(data){
					if(data.status == "success"){
						window.location.href = "home.do";
					}else{
						window.location.href = "login.do";
					}
				}
			}) 
		}
				
		return false;
		
	});
	
	
	
})
</script>
</head>
<body>
<form  id="testFormLogin" method="post"> 
	<div align="center"> 
		<table>
			<tr>
				<td align="left">UserName:</td>
				<td align="left"><input type="text" id="username" name="loginName"/></td>
			</tr>
			<tr>
				<td align="left">PassWord:</td>
				<td align="left"><input type="password" id="password" name="password"/></td>
			</tr>
		</table>
		<input type="submit" id="login" value="Login" />
	</div>
</form>

</body>
</html>

//-------- 华丽的分割线----------------------------------------------------------------------------

//----------说明一些属性-------------------------------------------------------------------------------------------

$("#articleInfoForm").validate({ 
			onfocusin: function(element) { $(element).valid(); },  
		    onfocusout: function(element) { $(element).valid(); }, 
     //加入onfocusout onfocusin 会在失去焦点是触发


			errorElement:"errorMsg",
			errorClass: "errorMsg",

   // errorElement  errorClass  这是自定义验证不通过时的元素和 元素的class名



			rules : {  
				name: {  
					required: true,  
					rangelength: [0,50],
				}, 
				
			},  
			messages:{  
				name : {  
					required : "文章标题必填",  
					rangelength:"文章标题长度范围在[0-50]之间", 
				}, 
				
			}  
		});