完成大概内容,部分细节没有完善。。。。
先看看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表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write.html、end.html、style.css。 1...
基于jquery的表单验证框架,基于jquery的表单验证框架,基于jquery的表单验证框架.
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
基于jquery框架,采用jQuery formValidator表单验证插件。
formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。
基于JQuery的表单验证
jQuery表单验证实例代码基于jquery.1.7.2.min.js制作,可设置手机号码,电子邮箱,中文姓名,身份证号码等表单项。
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jquery 表单验证用户名不仅进行格式验证,还进行了服务器端验证
formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。
基于Bootstrup的强大jQuery表单验证插件 各种表单验证
基于jQuery的表单验证解决方案.zip
EasyValidator 基于JQuery的表单验证组件演示.zip
基于jquery的表单验证,它的性能、便捷、功能、人性化已远远超越jquery自己官方的jquery.validate插件,用过你就知道好,压缩包里面有demo
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jQuery表单验证与表单美化手机发送验证码倒计时插件
本文给大家分享的是一段基于Jquery实现表单验证的代码,非常简单实用,感兴趣的小伙伴们可以参考下。