jQuery表单验证（含ajax）
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script language="javascript" src="http://www.ss-edu.org/javascript/jquery.js"></script>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {
color: #FF0000;
}
.bb {
color: #0000FF
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('form :input').blur(function(){
$(this).removeClass("warning").parents("td").find("span.error").remove().end().find("span.ok").remove();
var $listItem = $(this).parents("td").find("span:last");
//alert($listItem);
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 3 ){
var errorMsg = '用户名不能为空并且长度不能小于3！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("warning");
}
//var username=$('#username').val();
//var username=this.value;
//alert(username);
else if( this.value!="" )
{
//$(this).ajaxStart(function(){
// var errorMsg = '<img src="loading.jpg">';
// $('<span class="error"></span>').css("color","red")
// .html(errorMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// //$listItem.addClass("warning");
// //$("#ajax").html("<img src='loading.jpg'>");
// });
var url="test.php";
$.ajax({
type: "GET",
url: "test.php",
data: "username="+this.value,
success: function(data){
if (data==1)
{
var errorMsg = '用户名已存在！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$listItem.addClass("warning");
//alert($listItem);
}
else
{
var okMsg = '您可以注册！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$listItem.removeClass("warning");
$listItem.addClass("rightok");
}//end if
}
});
// $.get(url,{sid:Math.random(),username:this.value},function(data){
// //$("#aa").html("aaaaa");
// //alert("Data Loaded:" +data)
// if (data=="no")
// {
// var errorMsg = '用户名已存在！';
// $('<span class="error"></span>').css("color","red")
// .text(errorMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// $listItem.addClass("warning");
// //alert($listItem);
// }
// else
// {
// var okMsg = '您可以注册！';
// $('<span class="ok"></span>').css("color","blue")
// .text(okMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// $listItem.removeClass("warning");
// $listItem.addClass("rightok");
// }//end if
// });
}
else{
var okMsg = '验证通过！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("rightok");
}//end if
}//end if
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的email格式！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("warning");
}
else{
var okMsg = '验证通过！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("rightok");
}//end if
}//end if
});//end blur
//提交，最终验证。
$('#send').click(function(){
$("#sub_Msg").remove();
$(":input.required").trigger('blur');
var numWarning = $('.warning',$('form')).length;
//alert(numWarning);
if(numWarning){
// var errorFieldList = [];
// $(".warning").each(function(){
// errorFieldList.push( $(this).prev("span").text() );
// })
// $('<div></div>)').attr({'id':'sub_Msg','class':'warning'})
// .append("你输入的数据有"+numWarning+"处不合法！<br/>")
// .append("•"+errorFieldList.join("<br/>•"))
// .insertBefore('#send');
return false;
}
//alert("提交成功");
form.submit();
})
});
</SCRIPT>
</head>
<body>
<h3>表单验证简单例子</h3>
<form action="index.asp" name="form" method="post" id="form" >
<table>
<tr>
<td><span>用户名</span> :
<input type="text" id="username" class="required" />
<span id="ajax"></span></td>
</tr>
<tr>
<td><span>邮箱</span> :
<input type="text" id="email" class="required" />
<span></span></td>
</tr>
</table>
<input type="submit" id="send"/>
</form>
<br/>
<br/>
</body>
</html>
test.php
<?php
$link = mysql_connect("localhost", "root", "charles1") or die("Could not connect: " . mysql_error());
$db_select=mysql_select_db("test") or die("没有连接上数据库".mysql_error());
$kd=" select * from user order by id desc;";
$uy=mysql_query($kd) or die("失败".mysql_error());
$io=mysql_fetch_array($uy);
if (in_array("$_GET[username]", $io)) {
echo true;
}else{
echo false;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script language="javascript" src="http://www.ss-edu.org/javascript/jquery.js"></script>
<style>
.row2 li {
letter-spacing: 2px;
float: left;
width: 400px;
height: 30px;
border: 1px dashed #0066FF;
line-height:30px;
}
.aa {
color: #FF0000;
}
.bb {
color: #0000FF
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('form :input').blur(function(){
$(this).removeClass("warning").parents("td").find("span.error").remove().end().find("span.ok").remove();
var $listItem = $(this).parents("td").find("span:last");
//alert($listItem);
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 3 ){
var errorMsg = '用户名不能为空并且长度不能小于3！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("warning");
}
//var username=$('#username').val();
//var username=this.value;
//alert(username);
else if( this.value!="" )
{
//$(this).ajaxStart(function(){
// var errorMsg = '<img src="loading.jpg">';
// $('<span class="error"></span>').css("color","red")
// .html(errorMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// //$listItem.addClass("warning");
// //$("#ajax").html("<img src='loading.jpg'>");
// });
var url="test.php";
$.ajax({
type: "GET",
url: "test.php",
data: "username="+this.value,
success: function(data){
if (data==1)
{
var errorMsg = '用户名已存在！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$listItem.addClass("warning");
//alert($listItem);
}
else
{
var okMsg = '您可以注册！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$listItem.removeClass("warning");
$listItem.addClass("rightok");
}//end if
}
});
// $.get(url,{sid:Math.random(),username:this.value},function(data){
// //$("#aa").html("aaaaa");
// //alert("Data Loaded:" +data)
// if (data=="no")
// {
// var errorMsg = '用户名已存在！';
// $('<span class="error"></span>').css("color","red")
// .text(errorMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// $listItem.addClass("warning");
// //alert($listItem);
// }
// else
// {
// var okMsg = '您可以注册！';
// $('<span class="ok"></span>').css("color","blue")
// .text(okMsg)
// .appendTo($listItem);
// $listItem.css("backgroundColor","#eee");
// $listItem.removeClass("warning");
// $listItem.addClass("rightok");
// }//end if
// });
}
else{
var okMsg = '验证通过！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("rightok");
}//end if
}//end if
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的email格式！';
$('<span class="error"></span>').css("color","red")
.text(errorMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("warning");
}
else{
var okMsg = '验证通过！';
$('<span class="ok"></span>').css("color","blue")
.text(okMsg)
.appendTo($listItem);
$listItem.css("backgroundColor","#eee");
$(this).addClass("rightok");
}//end if
}//end if
});//end blur
//提交，最终验证。
$('#send').click(function(){
$("#sub_Msg").remove();
$(":input.required").trigger('blur');
var numWarning = $('.warning',$('form')).length;
//alert(numWarning);
if(numWarning){
// var errorFieldList = [];
// $(".warning").each(function(){
// errorFieldList.push( $(this).prev("span").text() );
// })
// $('<div></div>)').attr({'id':'sub_Msg','class':'warning'})
// .append("你输入的数据有"+numWarning+"处不合法！<br/>")
// .append("•"+errorFieldList.join("<br/>•"))
// .insertBefore('#send');
return false;
}
//alert("提交成功");
form.submit();
})
});
</SCRIPT>
</head>
<body>
<h3>表单验证简单例子</h3>
<form action="index.asp" name="form" method="post" id="form" >
<table>
<tr>
<td><span>用户名</span> :
<input type="text" id="username" class="required" />
<span id="ajax"></span></td>
</tr>
<tr>
<td><span>邮箱</span> :
<input type="text" id="email" class="required" />
<span></span></td>
</tr>
</table>
<input type="submit" id="send"/>
</form>
<br/>
<br/>
</body>
</html>
test.php
<?php
$link = mysql_connect("localhost", "root", "charles1") or die("Could not connect: " . mysql_error());
$db_select=mysql_select_db("test") or die("没有连接上数据库".mysql_error());
$kd=" select * from user order by id desc;";
$uy=mysql_query($kd) or die("失败".mysql_error());
$io=mysql_fetch_array($uy);
if (in_array("$_GET[username]", $io)) {
echo true;
}else{
echo false;
}
?>