ajax+json 注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="register">
<p class="title" id="title">
<span>登 录</span>
<span class="current">注 册</span>
</p>
<div class="form">
<div>
<span>+86</span>
<input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off"/>
<i id="user_icon"></i>
<p class="info" id="user_info"></p>
</div>
<div>
<input type="password" name="pwd" id="pwd" placeholder="请设置密码">
<i id="pwd_icon"></i>
<p class="info" id="pwd_info"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="sigup-btn" class="btn show">注 册</a>
<a href="javascript:void(0)" id="login-btn" class="btn">登 录</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var user = document.getElementById("user"),//用户名
pwd = document.getElementById("pwd"), //密码
sigup = document.getElementById("sigup-btn"), //注册按钮
login = document.getElementById("login-btn"), //登录按钮
titles = document.getElementById("title").getElementsByTagName("span"); //登录注册选项
userInfo = document.getElementById("user_info"),//手机号提示语
userIcon = document.getElementById("user_icon") //手机号提示符
pwdInfo = document.getElementById("pwd_info"), //密码提示语
pwdIcon = document.getElementById("pwd_icon"), //密码提示符
userReg = /^1[3578]\d{9}$/, //手机号规则
pwdReg = /^\w{5,12}$/, //密码规则
isRepeat = false; // 记录用户名是否被占用
// 检测用户
function checkUser(){
var userVal = user.value;
// 验证手机号是否有效
if(!userReg.test(userVal)){
userInfo.innerHTML = '手机号码无效！';
userIcon.className = 'no';
}else{
userInfo.innerHTML = '';
userIcon.className = '';
// 发起请求
$.ajax({
url:'http://localhost/register/server/isUserRepeat.php',
data:{username:userVal},
success:function(data){ //data{msg:'用户名重复',code:0}
if(data.code == 1){
userIcon.className = 'ok';
isRepeat = false;
}else if(data.code == 0){
userIcon.className = 'no';
isRepeat = true;
userInfo.innerHTML = data.msg;
}else{
userInfo.innerHTML = '检测失败，请重试...';
}
}
})
}
}
// 检测密码
function checkPwd(){
var pwdVal = pwd.value;
if(!pwdReg.test(pwdVal)){
pwdInfo.innerHTML = '请输入5到12位的字母、数字及下划线';
pwdIcon.className = 'no';
}else{
pwdInfo.innerHTML = '';
pwdIcon.className = 'ok';
}
}
// 注册
function register(){
var user_val = user.value,
pwd_val = pwd.value;
// 如果手机号有效且没有被占用，同时密码合法，方可注册
if(userReg.test(user_val) && pwdReg.test(pwd_val) && !isRepeat){
// 发起请求，实现注册
$.ajax({
url:"http://localhost/register/server/register.php",
method:"post",
data:{username:user_val,userpwd:pwd_val},
success:function(data){
alert("注册成功，请登录！");
// 调用显示登录界面
showLogin();
// 清空文本框
user.value = "";
pwd.value = "";
},
error:function(){
pwdInfo.innerHTML = '注册失败，请重试！';
}
})
}
}
// 显示登录
function showLogin(){
// 载入登录界面，登录高亮显示
titles[0].className = "current";
titles[1].className = "";
login.className = "show";
sigup.className = "";
}
// 显示注册
function showSigup(){
// 载入注册界面，注册高亮显示
titles[1].className = "current";
titles[0].className = "";
login.className = "";
sigup.className = "show";
}
// 绑定事件，检测手机号的有效性及是否注册过
user.addEventListener("blur",checkUser,false);
// 绑定事件，检测密码的有效性
pwd.addEventListener("blur",checkPwd,false);
// 注册
sigup.addEventListener("click",register,false);
// 登录高亮
titles[0].addEventListener("click",showLogin,false);
// 注册高亮
titles[1].addEventListener("click",showSigup,false);
</script>
</body>
</html>
ajax.js
var $ = { ajax:function(options){ var xhr = null, // XMLHttpRequest对象 url = options.url, // url地址 method = options.method || 'get', // 传输方式，默认为get async = typeof(options.async) === "undefined"?true:options.async, //因为是布尔型，所以不能像method那样写，要先判断是否定义过 data = options.data || null, // 参数 params = '', callback = options.success, // ajax请求成功的回调函数 error = options.error; // 将data的对象字面量的形式转换为字符串形式 if(data){ for(var i in data){ //i相当于username params += i + '=' + data[i] + '&'; } params = params.replace(/&$/,""); //将最后面的&去掉，$/代表以什么什么结束 } // 根据method的值改变url if(method === "get"){ url += '?'+params; } if(typeof XMLHttpRequest != "undefined"){ xhr = new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // 将所有可能出现的ActiveXObject版本放在一个数组中 var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0']; // 遍历创建XMLHttpRequest对象 var len = xhrArr.length; for(var i = 0;i<len;i++){ try{ // 创建XMLHttpRequest对象 xhr = new ActiveXObject(xhrArr[i]); break; } catch(ex){ } } }else{ throw new Error('No XHR object availabel.'); } xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if((xhr.status >=200 && xhr.status <300) || xhr.status === 304){ callback && callback(JSON.parse(xhr.responseText)) }else{ error && error();} } } // 创建发送请求 xhr.open(method,url,async); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(params); }, }
浙公网安备 33010602011771号