`
zfy421
  • 浏览: 233707 次
社区版块
存档分类
最新评论

基于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;
	}
}
 
分享到:
评论

相关推荐

    Java Web Jquery表单验证

    Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write.html、end.html、style.css。 1...

    jquery表单验证插件

    而"jquery表单验证插件"则是基于jQuery构建的一种工具,用于增强表单数据输入的验证功能,确保用户提交的数据符合预设的规则。这款插件极大地提高了用户体验,因为它可以在用户输入时即时反馈错误,而无需等待表单...

    jQuery表单验证

    jQuery表单验证是一种在网页开发中常用的技术,用于在用户提交数据前检查输入的有效性,确保数据的质量和安全性。...在实际项目中,可以根据需求选择合适的jQuery表单验证插件,或者基于基础功能进行二次开发。

    练习-基于jquery的表单验证控件

    自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...

    表单验证jquery插件

    jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...

    基于jquery框架,采用jQuery formValidator表单验证插件。

    基于jquery框架,采用jQuery formValidator表单验证插件。

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    **jQuery表单验证插件EasyValidator 2.0:打造高效且友好的用户输入体验** 在Web开发中,表单验证是不可或缺的一部分,它确保了用户提交的数据符合预期的格式和标准,从而防止无效数据的输入。jQuery作为一款广泛...

    jQuery强大的基于Bootstrap表单验证插件formValidation

    formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。

    基于jquery的表单验证框架

    **基于jQuery的表单验证框架** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而防止错误数据的提交,提高用户体验并保护服务器资源。jQuery是一个轻量级、高性能的JavaScript...

    jquery表单验证实例,对数字,字数,必填项等校验

    在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,我们关注的核心知识点包括: 1. **jQuery Validate插件安装与引入**:首先,你需要在HTML文件中引入`jQuery`库和`jQuery Validate`插件的JS文件。...

    jQuery表单验证实例代码

    在本文中,我们将深入探讨如何使用jQuery进行表单验证,主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作,使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点: 1. ...

    Jquery表单验证

    **jQuery表单验证详解** 在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而防止错误数据的提交并提高用户体验。jQuery,一个流行的JavaScript库,提供了简单易用的API来...

    基于jquery的表单验证代码

    2. **jQuery表单验证** - `.validate()`: 这是jQuery Validation Plugin提供的方法,用于初始化验证插件。可以配置各种验证规则和错误消息。 - `.rules('add')`: 添加验证规则到特定的表单字段,如`username`字段...

    jquery 表单验证插件Validform插件制作一行代码搞定整站的jquery表单验证

    Validform是一款基于jQuery的轻量级表单验证插件,它的核心优势在于: 1. **易用性**:只需要一行代码就能快速初始化整个表单的验证。 2. **灵活性**:支持自定义验证规则,可以满足各种复杂的验证需求。 3. **友好...

    jQuery 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    基于jquery的表单验证,超越jquery.validate插件

    本教程将深入探讨一个基于jQuery的表单验证解决方案,它在性能、易用性、功能和人性化方面超越了官方的`jquery.validate`插件。 首先,我们要了解`jquery.validate`插件。它是jQuery生态系统中最广泛使用的表单验证...

    jQuery Validation Engine ( jQuery 表单验证插件)

    6. **易于集成**:由于基于jQuery,这个插件可以轻松地与现有的jQuery项目结合,无需大量的代码修改。 7. **API接口**:Validation Engine提供了丰富的API接口,包括初始化验证、触发验证、获取验证状态等,使得...

    基于JQuery的表单验证

    在本文中,我们将深入探讨基于JQuery的表单验证,这是一种高效且用户友好的方法,用于确保用户在提交表单时输入的数据符合预期格式和要求。JQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果,...

Global site tag (gtag.js) - Google Analytics