用户注册验证的经典js代码.js

本文介绍了一种利用JavaScript进行前端表单验证的方法,并通过AJAX技术实现用户名是否已被使用的实时检查。文章详细解释了如何使用正则表达式验证用户名、密码、电子邮件和身份证号码等输入的有效性。

// JavaScript Document
var xmlHttp
function isUsed(str)
{
 xmlHttp=GetXmlHttpObject();
 if (xmlHttp==null)
  {
   alert ("浏览器不支持 HTTP Request!");
   return;
  }
 var url="isUsed.php";
 url=url+"?username="+str;
 url=url+"&sid="+Math.random();
 xmlHttp.onreadystatechange=stateChanged;
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}
function username()
{
  var str=document.getElementById("username").value;
  var reg = "^[A-Za-z0-9_][A-Za-z0-9_]{5,12}";
  if(str==""||str.length<6)
  { 
   output("t_username","用户名长度太短");
  }
  else
  {
   if(str.match(reg))
   { 
    isUsed(str);
   }
   else
   {
    output("t_username","用户名格式错误,只能是数字、字母或下划线");
   }
  }
}

function email()
{
  var str=document.getElementById("email").value;
  var reg ="[a-zA-Z0-9][a-z0-9_-]{3,15}@[a-zA-Z0-9]*.[a-zA-Z]*";  
  if(str.match(reg))
   {
   output("t_email","正确");
  }
  else
  {
   output("t_email","邮箱格式不正确");
  }
}
function password()
{
  var str=document.getElementById("password").value;
  if(str==""||str.length<6)
  { 
   output("t_password","密码长度太短");
   document.getElementById("img_height").style.cssText="width:1%";
   output("t_password_strong","");
  }
  else
  {
   if(str.length>5&&str.length<10)
   {
    document.getElementById("img_height").style.cssText="width:33%";
    output("t_password_strong","低");
   }
   else if(str.length>9&&str.length<13)
   {
    document.getElementById("img_height").style.cssText="width:66%";
    output("t_password_strong","中");
   }
   else
   {
    document.getElementById("img_height").style.cssText="width:100%";
    output("t_password_strong","高");
   }
   output("t_password","正确");
  }
}
function repassword()
{
  var str=document.getElementById("password").value;
  var rstr=document.getElementById("repassword").value;
  if(str==rstr)
  { 
   output("t_repassword","正确");
  }
  else
  {
   output("t_repassword","密码不匹配");
  }
}
function idcard()
{
  var str=document.getElementById("idcard").value;
  var reg ="^[0-9]";
  if(str.length==15||str.length==18)
  {    
   if(str.match(reg)!=null)
   { 
    output("t_idcard","正确");
   }
   else
   {
    output("t_idcard","身份证格式错误");
   }
  }
  else
  {
   output("t_idcard","身份证长度错误");
  }
}
function readme()
{
 var radio=document.getElementById("readme");
 
 if(document.getElementById("readme").checked)
 {
  document.getElementById("submitButton").disabled = false;
 }
 else
 {
  document.getElementById("submitButton").disabled=true;
 }
}
function output(idName,message)
{
 document.getElementById(idName).innerHTML=message;
 return false;
}
function GetXmlHttpObject()
{
 var xmlHttp=null;

 try
  {
   // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
  }
 catch (e)
  {
   // Internet Explorer
   try
    {
     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
   catch (e)
    {
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
 return xmlHttp;
}
function stateChanged()
{
 if (xmlHttp.readyState==4 || xmlHttp.readyState==200)
 {
  document.getElementById("t_username").innerHTML=xmlHttp.responseText;
 }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值