jQuery表单验证(含ajax)

原创 2012年03月24日 14:39:09
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("&bull;"+errorFieldList.join("<br/>&bull;"))
//    .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;

}

?>

使用jquery validate和ajax进行表单验证并向后台提交数据

以前我都是在页面中点击submit按钮后提交给某个url一个post数据,使用validate后我们就可以使用html页面和js来异步的向后台提交数据,具体代码如下 $("#form-product...

(六)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine ajax表单验证 数据库重复

jquery.validationEngine ajax表单验证数据库重复,指定数据库表名(tableName)、表字段(columnName)和录入数据(inputValue)进行验证,sql为 ...

如何实现完美的表单验证?js? jquery? struts? ajax?

首先,如果用js,必定要有事件,如果用onblur(),暂且不说默认没有光标这回事,我们设想已经把光标定位到“用户名”这里,但是如果登陆页面上有“注册”这一功能,你直接去点击“注册”,会出现什么样的情...

Struts2 Jquery Json 实现AJax表单验证

弄了一整天了,刚开始学习Jquery,很多东西还不熟,看看视频,查查资料,终于成功的集成Struts2+Jquery+Json 直接上图:用户名输入xxx,焦点丢失,提示”用户已存在“,否则提示“可...

liferay集成jQuery Validation Engine 表单验证及ajax的运用

jQuery Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。适用于日常的 E-mail...

ajax jquery 异步表单验证

文件目录: html代码: 异步表单验证 function checkname(){ //$("input[name='name']").val() ...

jquery table表格添加删除数据(含批量删除,全选全不选和简单的表单验证)

开始先导包... //先建立输入框和按钮 用户:  密码:  邮箱:         //建立一个表格             用户名    密码    邮箱    操作      //开始调用scr...

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

级记录在升级的过程中发现了一些bug,在这个版本里做了修正;使用新版的jQuery类库,精简了不少代码。1、升级的过程中,把inputvalidator函数的里的属性defaultvalue弄错了,导...

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例 插件主页: http://www.yhuan.com/ 求助帖,每帖必应 升级记录 QQ交流群:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery表单验证(含ajax)
举报原因:
原因补充:

(最多只允许输入30个字)