一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

行业网站用户注册ajax验证html+js片段

时间:2014-10-09 编辑:简简单单 来源:一聚教程网

注册效果页面

 

行业网站用户注册ajax验证html+js片段


html代码如下

 代码如下 复制代码



   
       
       
   
   
       
       
   
   
       
       
   
   
       
       
   
   
       
       
   
用户名:
       
4-20位字符或数字,无特殊字符,不分大小写
唯一邮箱:
邮箱可用于找回密码,一个邮箱只能注册一个用户
密码:word" type="password" id="u_password" maxlength="20" onBlur="checkPassword(this.value)" />
请使用6-20位英文字母、数字、减号或下划线的组合,区分大小写
确认密码:
请再输入一次上面的密码
验证码:
输入下面图片中的字符


上面我们细心的朋友会发现很多表单都带有了onBlur事件了,这个事件就是告诉我们离开时验证表单输入的内容是否正确了并在

显示了, 注意每一个
都是页面唯一的,大家可看上面代码,下面核心代码是js

 代码如下 复制代码

// ajax检测用户名是否已经注册了
function createXMLHttpRequest () {//创建XMLHttpRequest对象
    if (window.ActiveXObject) {//IE
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            return;
        }
    } else if (window.XMLHttpRequest) {//Mozilla,firefox
        try {
            return new XMLHttpRequest();
        } catch (e) {
            return;
        }
    }
}

function checkUser (username) {//主调函数
    var xmlHttp = createXMLHttpRequest();

    if (username == "") {
        getId("html_username").innerHTML = "您输入失败,请重新输入";
        return false ;
    }
    else if (!isUserName(username)) {
        getId("html_username").innerHTML = "请用4-20位英文字母、数字、减号或下划线的组合,不区分大小写";
        return false ;
    }

    if (xmlHttp) {
        username = username.toLowerCase();
        var url = "/user/check_reg.php?act=check_username&username=" + escape(username);

        callback = getReadyStateHandler(xmlHttp,username);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
}

function getReadyStateHandler(xmlHttp) {//服务器返回后处理函数
    return function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {   
                if (xmlHttp.responseText == "1") {
                    getId("html_username").innerHTML = "√恭喜您,用户名可用";
                }
                else if (xmlHttp.responseText == "0") {
                    getId("html_username").innerHTML = "用户名已被注册,请重新输入";
                }
                else {
                    getId("html_username").innerHTML = "您输入失败,请重新输入";
                }
            }
        }
    }
}

//检测密码
function checkPassword(str) {
 var str_html = getId("html_password");

 if (str.length <= 5 || str.length >= 21) {
  str_html.innerHTML = "请使用6-20位英文字母、数字、减号或下划线的组合,区分大小写";
  return false;
 }
 else if (!isPassword(str)) {
  str_html.innerHTML = "请使用6-20位英文字母、数字、减号或下划线的组合,区分大小写";
  return false;
 }
 else {
  str_html.innerHTML = "";
 }
}
function checkNextPassword(str) {
    var str_html = getId("html_nextpassword");
    var password = getId("u_password").value;
    var html_password = getId("html_password");

    if (password.length <= 5 || password.length >= 21) {
        html_password.innerHTML = "请使用6-20位英文字母、数字、减号或下划线的组合,区分大小写";
        return false;
    }
    else if (!isPassword(password)) {
        html_password.innerHTML = "请使用6-20位英文字母、数字、减号或下划线的组合,区分大小写";
        return false;
    }
    else if (str.length <= 5|| str.length >= 21) {
        str_html.innerHTML = "请再输入一遍上面输入的密码";
        return false;
    }
    else if (password != str) {
        str_html.innerHTML = "两次输入的密码不一样,请新输入";
        return false;
    }
    else{
        str_html.innerHTML = "";
    }
}

//检测邮箱
function checkUserEmail(str) {//主函数
    var xmlHttp = createXMLHttpRequest();
    var str_html = getId("html_email");

    if (str.length <= 0) {
        str_html.innerHTML = "请输入电子邮箱";
        return false;
    }
    else if (!isEmail(str)) {
        str_html.innerHTML = "电子邮箱格式不正正确";
        return false;
    }

    if (xmlHttp) {
        var email = str.toLowerCase();
        var url = "/user/check_reg.php?act=check_email&email=" + escape(email);

        callback = getReadyStateHandlerEmail(xmlHttp, email);
        xmlHttp.onreadystatechange = callback;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
}

function getReadyStateHandlerEmail(xmlHttp) {//服务器返回后处理函数
    return function () {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {   
                if (xmlHttp.responseText == "1") {
                    getId("html_email").innerHTML = "√恭喜您,邮箱可用";
                }
                else if (xmlHttp.responseText == "0") {
                    getId("html_email").innerHTML = "邮箱已经被注册,一个邮箱只能注册一个用户";
                }
                else {
                    getId("html_email").innerHTML = "请输入电子邮箱";
                }
            }
        }
    }
}

//判断是否是正确的邮箱
function isEmail(imail) {  
 var emailPattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;

 if (emailPattern.test(imail) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

//判断是否是正确的用户名,使用4-20个字母,数字,下划线,杠(-)的组合
function isUserName(str) {  
 var strPattern = /^[\w-]{4,20}$/;

 if (strPattern.test(str) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

//判断是否是正确的密码,使用6-20个字母,数字,下划线,杠(-)的组合
function isPassword(str) {  
 var strPattern = /^[\w-]{6,20}$/;

 if (strPattern.test(str) == false) {
  return false;
 }  
 else {
  return true; 
 }
}

// 检测验证码
function checkCode(str) {
    var str_html = getId("html_code");
    var str_len = strLen(str);
 if (str_len <= 3 || str_len >= 13) {
  str_html.innerHTML = "您输入的字符数不对";
  return false;
 }
 else {
  str_html.innerHTML = "输入下面图片中的字符";
 }
}

//检测真实姓名
function checkTruename(str) {
    var truename = getId(str);
    var html_truename = getId("html_" + str);

    if (strLen(truename.value) <= 2)
 {
  html_truename.innerHTML = "请输入您的称呼";
  return false;
 }
    else
    {
        html_truename.innerHTML = "";
    }
}

//检测手机
function checkMobile(str) {
    var mobile = getId(str);
    var html_mobile = getId("html_" + str);

 if (mobile.value.length > 0) {
  if (!/^[0-9]{11,30}$/.exec(mobile.value)){
   html_mobile.innerHTML = "靖输入正确的手机号码,格式为:18908476638";
   return false;
  }
  else {
   html_mobile.innerHTML="";
  }
 }
 else {
  html_mobile.innerHTML = "手机和座机必填一项,格式为:18908476638";
 }
}

//检测电话号码
function checkTel(str) {
    var tel = getId(str);
    var html_tel = getId("html_" + str);

    var mobile = getId('mobile');

 if (tel.value.length > 0) {
  if (!/^[+]{0,1}[0-9]{0,4}[-]{0,1}[0-9]{3,6}[-]{0,1}[0-9]{7,9}$/.exec(tel.value)){
   html_tel.innerHTML = "电话号码格式不正常,请重新输入";
   return false;
  }
  else {
   html_tel.innerHTML = "";
  }
 }
    else if (mobile.value == '' && tel.value == '')
    {
        html_tel.innerHTML = "手机和座机必填一项,格式为:0731-84168716";
    }
    else {
  html_tel.innerHTML = "手机和座机必填一项,格式为:0731-84168716";
 }
}

// 检测QQ
function checkQQ(str)
{
    var qq = getId(str);
    var html_qq = getId("html_" + str);

    if (qq.value.length > 0)
 {
  if (!/^[0-9]{4,15}$/.exec(qq.value))
  {
   html_qq.innerHTML = "QQ号码不对哦!";
   return false;
  }
        else
        {
            html_qq.innerHTML = "";
        }
 }
    else
    {
        html_qq.innerHTML = "便于客户直接在网上联系您";
    }
}


好了,我们只需要把这个文件放在与html中就可以验证了哦。