文章摘要
这篇文章展示了如何在HTML表单中实现用户信息的验证功能。通过JavaScript代码，分别对用户名、邮箱和手机号码进行唯一性、存在性和合法性验证。
1. **用户名验证**：使用`XMLHttpRequest`或`Microsoft.XMLHTTP`打开GET请求，验证用户名是否已被注册。验证结果会显示在`username_result`span元素中。
2. **邮箱验证**：通过`XMLHttpRequest`打开POST请求，校验邮箱是否合法。合法邮箱会显示“邮箱可以使用”，否则显示“邮箱不可以使用”。
3. **手机号码验证**：调用后端接口校验手机号码的合法性。成功获取验证结果后，会在`phone_result`span元素中显示详细信息。
整体来看，该代码实现了用户注册信息的初步验证功能。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>wellfancy</title>
<script type=”text/javascript”>
window.onload=function(){
var username=document.querySelector(“#username”);
var email=document.querySelector(“#email”);
var phone=document.querySelector(“#phone”);
username.onblur=function(){
var usernameValue=username.value;
//将usernamevalue提交给服务器，由服务器进行唯一性校验
//1、创建对象 兼容处理（针对IE6及以下，可以不写）
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject(“Microsoft.XMLHTTP”)
}
//2、准备发送,注意这里用的是get方法，因为后端的php文件在这里用的是get，如果后端工程师用的是post方法，这里则换成post
xhr.open(“get”,”https://www.jb51.net/article/Server1/checkUsername.php?uname=” + usernameValue,true);
//3、执行发送
xhr.send(null);
//制定回调函数
xhr.onreadystatechange=function (){
//注意这里是固定写法
if(xhr.readyState==4){
if(xhr.status==200){
var result=xhr.responseText;
//下面做局部刷新
var username_result=document.querySelector(“#username_result”);
if(result==”ok”){
username_result.innerText=”用户名可以使用”;
}else{
username_result.innerText=”用户名已经被注册”;
}
}
}
};
};
email.onblur=function(){
var emailValue=email.value;
var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}
var param=”e=” + emailValue;
xhr.open(“post”,”https://www.jb51.net/article/Server1/checkEmail.php”,true);
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xhr.send(param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4) {
if(xhr.status==200){
var result=xhr.responseText;
var email_result=document.querySelector(“#email_result”);
if(result==0) {
//邮箱可用
email_result.innerText=”邮箱可以使用”;
} else {
email_result.innerText=”邮箱不可以使用”;
}
}
}
};
};
phone.onblur=function(){
var phoneValue=phone.value;
var xhr=null;
if(window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
} else {
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhr.open(“post”,”https://www.jb51.net/article/Server1/checkPhone.php”,true);
var params=”phonenumber=”+phoneValue;
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
xhr.send(params);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
//xhr.responseText就是一个字符串
var result=xhr.responseText;
//希望将result这样的一个字符串转化为对象，方便我们获取里面的一些值
result=JSON.parse(result);
var phone_result=document.querySelector(“#phone_result”);
if(result.status==0) {
//代表手机号码可用
phone_result.innerText=result.message.tips + “,” + result.message.phonefrom;
} else if(result.status==1) {
//代表手机号码不可用
phone_result.innerText=result.message;
}
}
}
};
};
};
</script>
</head>
<body>
<h1>注册界面</h1>
<form action=””>
用户名：<input type=”text” id=”username”><span id=”username_result”></span><br>
邮箱：<input type=”text” id=”email”><span id=”email_result”></span><br>
手机号码： <input type=”text” id=”phone”><span id=”phone_result”></span><br>
</form>
</body>
</html>