js简单实现用户注册信息的校验代码

前端技术 2023/09/02 JavaScript

register.html

复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>用户注册</title>
<style type=\"text/css\">
  @import \"css/userRegister.css\";
</style>
</head>
<body id=\"BODY\">
<div id=\"DIV_FORM\">
<form method=\"post\" action=\"url\" >
 <table id=\"TABLE\">
    <tbody>
        <tr>
           <td>用户名:</td>
           <td>
              <input name=\"username\"  id=\"USERNAME\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td>密码:</td>
           <td>
             <input name=\"password\" id=\"PASSWORD\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td>确认密码:</td>
           <td>
             <input name=\"password2\" id=\"PASSWORD2\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td>身份证号:</td>
           <td>
             <input name=\"IDNumber\" id=\"IDNUMBER\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td>电话号码:</td>
           <td>
             <input name=\"phoneNumber\" id=\"PHONENUMBER\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td>Email:</td>
           <td>
               <input name=\"email\" id=\"EMAIL\" type=\"text\" onfocus=\"showDesc(this)\" onblur=\"checkText(this)\"/>
           </td>
        </tr>
        <tr>
           <td> </td>
           <td align=\"right\">
             <input type=\"submit\" value=\"确认提交\" />
           </td>
        </tr>
    </tbody> 
    </table>
   <table id=\"TABLE2\" border=\"0\">
       <tr><td><span id=\"username\">请输入用户名</span></td></tr>
       <tr><td><span id=\"password\">请输入密码</span></td></tr>
       <tr><td><span id=\"password2\">请再次输入密码</span></td></tr>
       <tr><td><span id=\"IDNumber\">请输入身份证号码</span></td></tr>
       <tr><td><span id=\"phoneNumber\">请输入电话号码</span></td></tr>
       <tr><td><span id=\"email\">请输入邮箱地址</span></td></tr>
    </table>
</form>
</div>
<script  type=\"text/javascript\"  src=\"jslib/registerCheck.js\">
</script>
</body>
</html>

registerCheck.js

复制代码 代码如下:

//输入框获得焦点时,显示提示内容
function showDesc(obj)

   var id= obj.name;
   document.getElementById(id).style.display=\"inline\";
}

//输入框失去焦点时检验输入内容是否有效
function checkText(obj)
{
   //获取输入框的id值
   var id= obj.name;
   var text=document.getElementById(id.toString().toUpperCase()).value;

   //判断是否为空
   if(text.replace(/\\s/g, \"\")==\"\")
   {
      document.getElementById(id).innerHTML=\"输入不能为空\";
   }
   else
   {
     //组装方法
     //取首字母转换为大写,其余不变
     var firstChar=id.charAt(0).toString().toUpperCase();
     //
     var strsub=id.substring(1,id.length);
     var strMethod=\"check\"+firstChar+strsub+\"()\";
     var isTrue = eval(strMethod);
     if(isTrue)
     {
         document.getElementById(id).innerHTML=\"输入有效\";
     }
   }

  
}

function checkUsername()
{
    //只简单的判断用户名的长度
    var id = document.getElementById(\"USERNAME\");
    var username=id.value;   
    if(username.length > 10)
    {
      document.getElementById(id.name).innerHTML = \"输入的用户名过长\";
      return false;
    }
    else
    return true;
}
function checkPassword()
{
    var password = document.getElementById(\"PASSWORD\").value;   
    return true;
}
function checkPassword2()
{
     var id=document.getElementById(\"PASSWORD\");
     var id2=document.getElementById(\"PASSWORD2\");
     var password = id.value;   
     var password2 = id2.value;
     if(password!=password2)
     {
        document.getElementById(id.name).innerHTML=\"密码不一致\";
        return false;
     }
     return true;   
}
function checkIDNumber()
{
  var id=document.getElementById(\"IDNUMBER\");
  var IDNumber =id.value;
  if(IDNumber.length<18||IDNumber.length>19)
  {
    document.getElementById(id.name).innerHTML=\"身份证号长度有误\";
    return false;
  }
  var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;
  if(expr.test(IDNumber))
  {
     document.getElementById(id.name).innerHTML=\"身份证号不可以全\'0\'或全\'1\'\";
     return false;
  }
  return true;
}
function checkPhoneNumber()
{
// 利用正则表达式对输入数据匹配
   var id=document.getElementById(\"PHONENUMBER\");
   var phone = id.value;    
//匹配到一个非数字字符,则返回false
   var expr =  /\\D/i;
   if(expr.test(phone))
   {
      document.getElementById(id.name).innerHTML=\"不能输入非数字字符\";
      return false;
   }
   return true;

}
function checkEmail()
{
// 利用正则表达式对输入数据匹配
   var id =  document.getElementById(\"EMAIL\")
   var email = id.value;   
//以字母或数字开头,跟上@,字母数字以.com结尾
   var expr =  /^([0-9]|[a-z])+@([0-9]|[a-z])+(\\.[c][o][m])$/i;
   if(!expr.test(email))
   {
      document.getElementById(id.name).innerHTML=\"输入的邮箱格式有误\";
      return false;
   }
   return true;
}

本文地址:https://www.stayed.cn/item/3840

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。