注册经典例子
<script type="text/javascript">
var xmlHttp;
var valFlg = true; //是否为空
var nameFlg = true; //是否存在name
var mailFlg = true; //是否存在email
function createXMLHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla浏览器
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overrideMimeType){ //设置MiMe类别(有些版本的Mozilla浏览器处理服务器返回的未包含XML
mime-type头部信息的内容时会出错。因此，要确保返回的内容包含text/xml信息:
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){ //IE浏览器
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!xmlHttp){
alert("不能创建XMLHttpRequest对象");
}
}
function createQueryString(){
var queryString = "";
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var email = document.getElementById("email").value;
queryString = "name="+name+"&password="+password+"&email="+email;
return queryString;
}
function sendRgeRequest(){
var str = createQueryString();
createXMLHttpRequest();
xmlHttp.onreadystatechange = registCallback;
url = "http://localhost:8086/AjaxAddressBook/registPerson?type=regist";
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(str);
}
function registCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("result").innerHTML="恭喜您，注册成功";
}
}
}
function validateName(obj){
if(obj.value.length == 0){
obj.nextSibling.innerHTML="用户名不能为空";
return;
}else{
obj.nextSibling.innerHTML="";
}
msg = obj;
createXMLHttpRequest();
xmlHttp.onreadystatechange=validateCallBackHandle;
var url = "http://localhost:8086/AjaxAddressBook/registPerson?type=validate";
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name="+obj.value);
}
function validateEmail(email){
alert(email.value);
var re = RegExp("^([a-z]|[A-Z]){1}([a-z]|[A-Z]|\.|[0-9]|-|_){0,20}@([a-z]|[A-Z]|[0-9]|-|_){0,20}\.
([a-z]|[A-Z]){2,3}(\.([a-z]|[A-Z]){2}){0,1}$");
if(email.value.length == 0){
email.nextSibling.innerHTML = "Email不能为空";
return;
}else if(!re.test(email.value)){
email.nextSibling.innerHTML = "Email格式不正确";
mailFlg = false;
return;
}else{
email.nextSibling.innerHTML = "";
mailFlg = true;
return;
}
}
function validateCallBackHandle(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var result = xmlHttp.responseText;
alert(result.length);
msg.nextSibling.innerHTML = result;
if(result.length != 0){
nameFlg = false; //如果返回信息不为空，则说明用户已经存在.不能提交
}else{
nameFlg = true;
}
}
}
}
function validateBlank(idList,vaList){
var inputList = document.getElementsByTagName("input");
for(var i = 0; i < (inputList.length - 2); i ++){
if(inputList[i].value.length == 0 && inputList[i].id == idList[i]){
inputList[i].nextSibling.innerHTML = vaList[i];
valFlg = false; //如果有一个为空，则不能提交
return;
}else{
valFlg = true;
}
}
}
function destoryVar(){
nameFlg = null;
valFlg = null;
mailFlg = null;
}
function subForm(){
var idList = ["name","password","email"];
var vaList = ["用户名不能为空","密码不能为空","E-mail不能为空"];
validateBlank(idList,vaList);
alert(nameFlg);
alert(mailFlg);
alert(valFlg);
if(valFlg && mailFlg && nameFlg){ //如果都验证不为空，则进行注册,验证姓名存在，也不能注册,Email格式
不正确也不能注册
sendRgeRequest();
destoryVar();
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<center>
<h2 align="center" style="margin-bottom: 30px;">用户注册</h2>
<form action="http://www.hao123.com" style="width: 400px; background-color: gray; " onsubmit="return
subForm();" method="post" enctype="application/x-www-form-urlencoded">
<table align="center" style="background-color: gray;">
<tr>
<td align="left" width="19%">用户名：</td>
<td width="*"><input type="text" name="name" id="name" onblur="return validateName(this);"/><span
style="color: red; font-size: 13px; margin-left: 10px;"></span></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="password" id="password"/><span style="color: red; font-size: 13px;
margin-left: 10px;"></span></td>
</tr>
<tr>
<td>E-mail：</td>
<td><input type="text" name="email" id="email" onblur="return validateEmail(this);"/><span
style="color: red; font-size: 13px; margin-left: 10px;"></span></td>
</tr>
<tr>
<td><input type="submit" value="提交"/><input type="reset" value="重置"/></td>
<td></td>
</tr>
</table>
</form>
<div id="result" style="color: red;"></div>
</center>
