基于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;//将变量值还原为falsevar 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(!/^()+@()+((\.{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\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;}}
页:
[1]