jQuery表单验证（含ajax）

来源：互联网发布：24口网络配线架价格编辑：程序博客网时间：2024/06/06 10:47

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;

}

?>