完成大概内容,部分细节没有完善。。。。
先看看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表单验证插件,或者基于基础功能进行二次开发。
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
基于jquery框架,采用jQuery formValidator表单验证插件。
**jQuery表单验证插件EasyValidator 2.0:打造高效且友好的用户输入体验** 在Web开发中,表单验证是不可或缺的一部分,它确保了用户提交的数据符合预期的格式和标准,从而防止无效数据的输入。jQuery作为一款广泛...
formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。
**基于jQuery的表单验证框架** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而防止错误数据的提交,提高用户体验并保护服务器资源。jQuery是一个轻量级、高性能的JavaScript...
在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,我们关注的核心知识点包括: 1. **jQuery Validate插件安装与引入**:首先,你需要在HTML文件中引入`jQuery`库和`jQuery Validate`插件的JS文件。...
在本文中,我们将深入探讨如何使用jQuery进行表单验证,主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作,使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点: 1. ...
**jQuery表单验证详解** 在Web开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而防止错误数据的提交并提高用户体验。jQuery,一个流行的JavaScript库,提供了简单易用的API来...
2. **jQuery表单验证** - `.validate()`: 这是jQuery Validation Plugin提供的方法,用于初始化验证插件。可以配置各种验证规则和错误消息。 - `.rules('add')`: 添加验证规则到特定的表单字段,如`username`字段...
Validform是一款基于jQuery的轻量级表单验证插件,它的核心优势在于: 1. **易用性**:只需要一行代码就能快速初始化整个表单的验证。 2. **灵活性**:支持自定义验证规则,可以满足各种复杂的验证需求。 3. **友好...
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...
本教程将深入探讨一个基于jQuery的表单验证解决方案,它在性能、易用性、功能和人性化方面超越了官方的`jquery.validate`插件。 首先,我们要了解`jquery.validate`插件。它是jQuery生态系统中最广泛使用的表单验证...
6. **易于集成**:由于基于jQuery,这个插件可以轻松地与现有的jQuery项目结合,无需大量的代码修改。 7. **API接口**:Validation Engine提供了丰富的API接口,包括初始化验证、触发验证、获取验证状态等,使得...
在本文中,我们将深入探讨基于JQuery的表单验证,这是一种高效且用户友好的方法,用于确保用户在提交表单时输入的数据符合预期格式和要求。JQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果,...