国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

js簡單實現(xiàn)用戶注冊信息的校驗代碼

2019-11-20 21:41:03
字體:
供稿:網(wǎng)友

register.html

復(fù)制代碼 代碼如下:

<!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>確認(rèn)密碼:</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="確認(rèn)提交" />
           </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

復(fù)制代碼 代碼如下:

//輸入框獲得焦點時,顯示提示內(nèi)容
function showDesc(obj)

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

//輸入框失去焦點時檢驗輸入內(nèi)容是否有效
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
   {
     //組裝方法
     //取首字母轉(zhuǎn)換為大寫,其余不變
     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()
{
// 利用正則表達式對輸入數(shù)據(jù)匹配
   var id=document.getElementById("PHONENUMBER");
   var phone = id.value;    
//匹配到一個非數(shù)字字符,則返回false
   var expr =  //D/i;
   if(expr.test(phone))
   {
      document.getElementById(id.name).innerHTML="不能輸入非數(shù)字字符";
      return false;
   }
   return true;

}
function checkEmail()
{
// 利用正則表達式對輸入數(shù)據(jù)匹配
   var id =  document.getElementById("EMAIL")
   var email = id.value;   
//以字母或數(shù)字開頭,跟上@,字母數(shù)字以.com結(jié)尾
   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;
}

CSS

復(fù)制代碼 代碼如下:

@charset "utf-8";
/* CSS Document */
#BODY{
    text-align:center;
}

#TABLE{
    text-align:left;
    margin: auto;
    float:left;
}
#DIV_FORM{
    margin-left:300px;
}
#TABLE2{
    text-align:left;
    width:150px;
    height:150px;
}
#TABLE2 tr
{
    height:24px;
}
#TABLE2 span{
    display:none;
}

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 正宁县| 松滋市| 宾川县| 民勤县| 琼结县| 远安县| 辽阳市| 融水| 武义县| 盐山县| 化德县| 永康市| 大石桥市| 县级市| 白朗县| 扶沟县| 舒兰市| 介休市| 左贡县| 原阳县| 达拉特旗| 正宁县| 萨嘎县| 榆中县| 和林格尔县| 陆川县| 九江市| 禹州市| 泾源县| 澳门| 海淀区| 吉木萨尔县| 逊克县| 鲁山县| 永寿县| 铁岭县| 江安县| 肥东县| 监利县| 海盐县| 云南省|