jquery的validate使用实例

最新推荐文章于 2025-06-27 11:09:23 发布

原创最新推荐文章于 2025-06-27 11:09:23 发布 · 543 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

PHP

前端设计

本文介绍了一个使用jQuery进行前端表单验证的实例，包括日期格式验证及AJAX远程验证用户名是否重复的功能。通过自定义验证方法和利用jQuery Validate插件实现了高效且易于维护的表单验证逻辑。

http://www.cnblogs.com/weiqt/articles/2013800.html

前台页面：test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script src="messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.validator.addMethod("isDate", function(value, element){	
	var ereg = /^(\d{1,4})(-|\/)(\d{1,2})(-|\/)(\d{1,2})$/;	
	var r = value.match(ereg);	
	if (r == null) {		
		return false;	
	}	
	var d = new Date(r[1], r[3] - 1, r[5]);	
	var result = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[5]);	
	return this.optional(element) || (result);
}, "请输入正确的日期");
$(document).ready(function(){
	$('#signupForm').validate({
		 rules : {
            username : {
                required : true,
				remote:{   //AJAX验证用户名是否重复
					url: "test.php", //后台处理程序    
					type: "post",  //数据发送方式   
					dataType: "json",       //接受数据格式       
					data:  {                     //要传递的数据   
						username: function() {   
							return $("#username").val();   
					 	}   
  					}
                 }   

            },
            email   : {
                required : true,
				email:true,
            },
			dateline   : {
                required : true,
				isDate:true
            },
			confirm_password:{
				equalTo:"#password"
			}
        }
	
	});
	
	
	var newdiv = $('<div class="mark">fff</div>');
	$("#myform").prepend(newdiv);

});

</script>
</head>

<body>
<div id="myform">
<form id="signupForm" method="get" action="">
    <p>
        <label for="username">用户名：</label>
        <input id="username" name="username" />
    </p>
 <p>
  <label for="email">邮箱：</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="email">时间：</label>
  <input id="dateline" name="dateline" />
 </p>
 <p>
  <label for="password">密码：</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="提交"/>
    </p>
</form>
</div>
</body>
</html>

服务器端页面：test.php

$a = $_POST['username'];
if($a=='xiang'){
	echo json_encode("用户名已存在!");
}else{
	echo  json_encode("可以使用!");
}

测试时，在用户名那里输入xiang,后面即可出现“用户名已存在”