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中的ajax方法验证表单

在进行用户从注册的时候,进场需要校验email或username是否被注册,这时候需要ajax验证,但是ajax验证无法返回回调函数的值到外部的校验方法,如 function CheckForm()...
  • andy1219111
  • andy1219111
  • 2011年10月28日 16:18
  • 5609

使用JQuery和Ajax实现基本表单校验

使用JQuery和Ajax实现基本表单校验本文实现的是使用JQuery和Ajax实现基本表单校验,包括前端校验以及用MVC模式判断用户名是否存在等功能实现文本框中出现内容 可以在文本框input里边...
  • qq_37796017
  • qq_37796017
  • 2017年09月16日 13:33
  • 247

jQuery中使用ajax对表单数据进行异步验证

在网页中使用ajax可以让网页的响应更快,通过异步地向服务器发送请求,不需要重新载入页面,提升了用户的体验。 在jQuery中使用Ajax基本格式为: $('#button').click(f...
  • u014796999
  • u014796999
  • 2016年05月17日 22:57
  • 1216

jquery---ajax异步提交+validate表单验证

$("#submitButton").click(function(){ //序列化表单 var param = $("#leaveSave").serialize(); $.aja...
  • markely
  • markely
  • 2014年04月30日 16:07
  • 4975

PHP jQuery Ajax提交与验证form表单详解

PHP jQuery Ajax Form 表单提交与验证实例解析,包括创建一个表单 html 页面、添加 JQuery 代码、jquery ajax 表单提交、jquery ajax 表单验证、反馈信...
  • youaregoo
  • youaregoo
  • 2013年06月28日 10:16
  • 1443

jquery表单验证实例【经典】

代码: body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} form div { margin:5px 0;...
  • j2eelamp
  • j2eelamp
  • 2011年11月28日 17:18
  • 8470

jquery之ajax提交、js验证表单

在HTML页面中,如果想提交表单后不刷新整个页面,通过ajax来提交是比较常用的方法。 Jquery针对ajax也做了一些封装,用起来非常方便。具体可以参照:http://www.w3school....
  • xiaoyu966
  • xiaoyu966
  • 2014年05月09日 10:01
  • 1287

JqueryMobile表单验证实例

管理平台                                                                     $(documen...
  • bell123987
  • bell123987
  • 2013年12月12日 14:25
  • 1475

JSP+Servlet+ JQuery AJAX 实现表单添加验证

在写老师布置的酒店管理系统,在添加桌名的地方想添加验证,去网上看了下大概,自己写了下 我用的是jquery-1.8.3.min.js,下面贴代码 JS文件: function trim(...
  • coderofslq
  • coderofslq
  • 2016年12月24日 22:39
  • 1130

Form表单利用Jquery Validate验证以及ajax提交

详细讲解Form表单利用Jquery Validate验证以及ajax提交的过程,以及Jquery Validate使用中的input写法,Validate的标尺,Validate的自定义提示语,非空...
  • s445320
  • s445320
  • 2016年02月26日 13:27
  • 19808
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery表单验证(含ajax)
举报原因:
原因补充:

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