基于jquery的表单验证

zfy421

浏览: 234231 次

最近访客更多访客>>

nihao005588

gostsky

thineagle

hyc723

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery 表单验证

完成大概内容，部分细节没有完善。。。。

先看看html页面代码

<head>
    <title>regeist.html</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet " href="css/form.css">
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
  </head>
  
  <body>
    <form action="regeist" method="post">
    	<div class="int">
    		<label for="username">用户名:</label>
    		<input type="text" id="username" class="required"/>
    	</div>
    	<div class="int">
    		<label for="password">密码:</label>
    		<input type="password" id="password" class="required"/>
    	</div>
    	<div class="int">
    		<label for="repassword">确认密码:</label>
    		<input type="password" id="repassword" class="required"/>
    	</div>
    	<div class="int">
    		<label for="email">邮箱:</label>
    		<input type="text" id="email" class="required"/>
    	</div>
    	<div class="int">
    		<label for="mobile">手机号码:</label>
    		<input type="text" id="mobile">
    	</div>
    	<div class="int">
    		<label for="birthday">出生日期:</label>
    		<input type="text" id="birthday">
    	</div>
    	<div class="btn">
    		<input type="submit" id="send" value="提交"/>
    		<input type="reset" id="clear" value="重置"/>
    	</div>
    </form>
  </body>

注意引入js文件时jquery要写在最前面否则会报错

下面看看form.js的代码

$().ready(function(){
	//如果必填则添加*标志
	$("form :input.required").each(function(){
		var required=$("<strong class='high'>*</strong>");
		$(this).parent().append(required);
	});
	//文本框失去焦点后
	var bol=false;//临时保存用户名是否存在的变量
	$("form :input").blur(function(){
		var tmppwd;//临时保存密码
		var $parent=$(this).parent();
		$parent.find(".formtips").remove();
		if($(this).is("#username")){
			if(this.value==""){
				var msg="用户名不能为空";
				//alert(msg);
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else if(this.value.length<5){
				var msg="用户名长度为5-20个字符";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else if(checkname(this.value)){
				bol=false;//将变量值还原为false
				var msg="用户存在";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else{
				$parent.append("<span class='formtips onSuccess'></span>");
			}
		}
		if($(this).is("#password")){
			pwd=this.value;
			if(this.value==""){
				var msg="密码不能为空";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else if(this.value.length<6){
				var msg="密码长度为6-20个字符";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else{
				$parent.append("<span class='formtips onSuccess'></span>");
			}
		}
		if($(this).is("#repassword")){
			if(this.value==""){
				var msg="确认密码不能为空";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else if(this.value!=pwd){
				var msg="密码不一致";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else{
				$parent.append("<span class='formtips onSuccess'></span>");
			}
		}
		if($(this).is("#email")){
			if(this.value==""){
				var msg="邮箱不能为空";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(this.value)){
				var msg="邮箱格式错误";
				$parent.append("<span class='formtips onError'>"+msg+"</span>");
			}else{
				$parent.append("<span class='formtips onSuccess'></span>");
			}
		}
		if($(this).is("#mobile")){
			if(this.value!=""){
				if(!/^1[3|4|5|8][0-9]\d{8}$/.test(this.value)){
					var msg="手机格式错误";
					$parent.append("<span class='formtips onError'>"+msg+"</span>");
				}else{
					$parent.append("<span class='formtips onSuccess'></span>");
				}
			}
		}
	})
	//为键盘按下及获得焦点事件绑定"blur"
//	.keyup(function(){
//		$(this).triggerHandler("blur");
//	})
//	.focus(function(){
//		$(this).triggerHandler("blur");
//	});
	
	function checkname(name){
		$.ajax({
			type:"post",
			url:"checkname",
			async:false,
			data:"username="+name,
			success:function(data){
				if(data=="true"){
					bol=true;
				}
			}
		});
		return bol;
	};
	
	//提交最终验证
	$("#send").click(function(){
		$("form :input.required").trigger("blur");
		var errornum=$("form .onError").length;
		if(errornum){
			return false;
		}
		alert("注册成功");
	});
	
	$("#clear").click(function(){
		$(".formtips").remove();
	});
})

验证用户名是否存在时调用checkname的servlet连接mysql数据库查询，存在则返回true否则返回false

这是servlet的代码

response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String username=request.getParameter("username");
		System.out.println(username);
		boolean flag=UserDao.checkname(username);
		if(flag){
			out.print("true");
		}else{
			out.print("false");
		}

DBcon的代码及UserDao的代码如下

public class DBcon {
	public static Connection getcon(){
		String url="jdbc:mysql://localhost:3306/mytest";
		String pwd="598445528";
		Connection con = null;
		try {
			Class.forName("com.mysql.jdbc.Driver");
			con=DriverManager.getConnection(url,"root",pwd);
		} catch (Exception e) {
			// TODO: handle exception
		}
		return con;
	}
}

public class UserDao {

	public static boolean checkname(String username){
		Connection con=DBcon.getcon();
		String sql="select * from user where username =?";
		try {
			PreparedStatement pt=con.prepareStatement(sql);
			pt.setString(1, username);
			ResultSet rs=pt.executeQuery();
			if(rs.next()){
				return true;
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
		return false;
	}
}

分享到：