利用js實現用戶註冊檢驗改進版（nm360瀏覽器不兼容）

//index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   
</head>

<body>
    <a href="register.html">用戶註冊</a><br>
</body>
</html>

//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" οnlοad="pageLoad()">
<div id="DIV_FORM">
<form method="post" action="registerSuccess.jsp" >
<table id="TABLE" >
    <tbody>
        <tr>
           <td>用戶名：</td>
           <td>
              <input name="username" class="cls_inpt" type="text" id="USERNAME" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);" οnkeyup="checkText(this,event)" οnclick="active(this)"/>
           </td>
        </tr>
        <tr>
           <td>密碼：</td>
           <td>
             <input name="password" class="cls_inpt" id="PASSWORD" type="password" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);" οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>確認密碼：</td>
           <td>
             <input name="password2" type="password" class="cls_inpt" id="PASSWORD2" οnfοcus="showDesc(this)" disabled="disabled"
              οnblur="isNull(this);setBackground(this);" οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>身份證號：</td>
           <td>
             <input name="IDNumber" type="text" class="cls_inpt"id="IDNUMBER" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);" οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="19"/>
           </td>
        </tr>
        <tr>
           <td>電話號碼：</td>
           <td>
             <input name="phoneNumber" type="text" class="cls_inpt" id="PHONENUMBER" οnfοcus="showDesc(this)"
              οnblur="isNull(this);setBackground(this);" οnkeyup="checkText(this,event)" οnclick="active(this)" maxlength="20"/>
           </td>
        </tr>
        <tr>
           <td>Email：</td>
           <td>
               <input name="email" class="cls_inpt" id="EMAIL" type="text" οnfοcus="showDesc(this)" οnblur="isNull(this);setBackground(this)"
               οnkeyup="checkText(this,event)" οnclick="active(this)"/>
           </td>
        </tr>
        <tr>
           <td> </td>
           <td align="right">
             <input id="SUBMIT" type="submit" value="確認提交" disabled="disabled"   οnmοuseοver="lastCheck()"/>
           </td>
        </tr>
    </tbody>
    </table>
   <table id="TABLE2" border="0">
       <tr><td><span id="username" active="0">請輸入用戶名</span></td></tr>
       <tr><td><span id="password" active="0">請輸入密碼</span></td></tr>
       <tr><td><span id="password2" active="0">請再次輸入密碼</span></td></tr>
       <tr><td><span id="IDNumber" active="0">請輸入身份證號碼</span></td></tr>
       <tr><td><span id="phoneNumber" active="0">請輸入電話號碼</span></td></tr>
       <tr><td><span id="email" active="0">請輸入郵箱地址</span></td></tr>
    </table>
</form>
</div>
<script type="text/javascript" src="jslib/registerCheck.js">
</script>
</body>
</html>

//registerCheck.js

// JavaScript Document
//
//在頁面加載時初始化頁面必要信息
function pageLoad()
{
   document.getElementById("USERNAME").value="";
   document.getElementById("PASSWORD").value="";
   document.getElementById("PASSWORD2").value="";
   document.getElementById("PASSWORD2").setAttribute("disabled","disabled");
   document.getElementById("IDNUMBER").value="";
   document.getElementById("PHONENUMBER").value="";
   document.getElementById("EMAIL").value="";

   document.getElementById("username").setAttribute("active", "0");
   document.getElementById("password").setAttribute("active", "0");
   document.getElementById("password2").setAttribute("active", "0");
   document.getElementById("IDNumber").setAttribute("active", "0");
   document.getElementById("phoneNumber").setAttribute("active", "0");
   document.getElementById("email").setAttribute("active", "0");
}

//輸入框獲得焦點時，顯示提示內容
function showDesc(obj)
{
   var id= obj.name;
   document.getElementById(id).style.display="inline";
}
//判斷輸入框內容是否爲空
function isNull(obj)
{
   //獲取輸入內容
   var id= obj.name;
   var text=document.getElementById(id.toString().toUpperCase()).value;

   //判斷是否爲空
   if(text.replace(/\s/g, "")=="")
   {
   var id_span=document.getElementById(id);
     id_span.innerHTML="* 輸入不能爲空";
   id_span.style.color="#F00";
   id_span.setAttribute("active","0");
   return true;
   }

}
//輸入時檢驗輸入內容是否有效
function checkText(obj,e)
{
   //如果輸入的是退格鍵，判斷下內容是否爲空
   if(8==e.which&&isNull(obj))
       {
          isSuccess();
          return;
       }
   //輸入框的name屬性名與span 標籤id 名一致
    var id= obj.name;
   //組裝方法
   //取首字母轉換爲大寫,其餘不變
   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)
   {
       var id_span=document.getElementById(id);
       id_span.innerHTML="輸入有效";
       id_span.style.color="#060";
       id_span.setAttribute("active","1");

       //判斷註冊信息是否全部有效
       isSuccess();

   }

}

function checkUsername()
{
   //只簡單的判斷用戶名的長度
    var id = document.getElementById("USERNAME");
   var username=id.value;
   if(username.length > 10)
   {
      var id_span=document.getElementById(id.name);
      id_span.innerHTML = "*輸入的用戶名過長";
      id_span.style.color="#F00";

      id_span.setAttribute("active","0");
      return false;
   }
    else
   return true;
}
function checkPassword()
{
    var password = document.getElementById("PASSWORD").value;
   //當在password輸入時，password2先清空
   document.getElementById("PASSWORD2").value="";
    document.getElementById("PASSWORD2").removeAttribute("disabled");
   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)
   {
       var id_span=document.getElementById(id2.name);
        id_span.innerHTML="* 密碼不一致";
       id_span.style.color="#F00";

       id_span.setAttribute("active","0");
       return false;
   }
   return true;
}
function checkIDNumber()
{
var id=document.getElementById("IDNUMBER");
var IDNumber =id.value;
if(IDNumber.length<18||IDNumber.length>19)
{
    var id_span=document.getElementById(id.name);
   id_span.innerHTML="* 身份證號長度有誤";
   id_span.style.color="#F00";

   id_span.setAttribute("active","0");
   return false;
}
var expr=/([0]{18}[x|y]?)|([1]{18}[x|y]?)/i;

//檢驗前18位是否有非數字字符
var expr2=/\D/i;

var subID=IDNumber.substring(0,IDNumber.length);
//輸入到第18位時檢驗是否存在非數字字符
if(expr2.test(subID)&&IDNumber.length==18)
{
   var id_span=document.getElementById(id.name);
   id_span.innerHTML="* 身份證號前18不可以爲非數字字符";
   id_span.style.color="#F00";
   id_span.setAttribute("active","0");
   return false;
}

else
{
      //如果存在19位檢測第19位是否是x或y
   if(IDNumber.length==19)
   {
       if(IDNumber.charAt(IDNumber.length-1)!="x"&&IDNumber.charAt(IDNumber.length-1)!="y")
       {
           var id_span=document.getElementById(id.name);
           id_span.innerHTML="* 身份證號長度有誤";
           id_span.style.color="#F00";

           id_span.setAttribute("active","0");
           return false;
       }
   }
}
//
if(expr.test(IDNumber))
{
   var id_span=document.getElementById(id.name);
   id_span.innerHTML="* 身份證號不可以全'0'或全'1'";
   id_span.style.color="#F00";

   id_span.setAttribute("active","0");
   return false;
}
return true;
}
function checkPhoneNumber()
{
// 利用正則表達式對輸入數據匹配
   var id=document.getElementById("PHONENUMBER");
   var id_span=document.getElementById(id.name);
   var phone = id.value;
   if(phone.length>20)
   {
      id_span.innerHTML="* 電話號碼太長";
      id_span.style.color="#F00";

      id_span.setAttribute("active","0");
      return false;
   }
//匹配到一個非數字字符，則返回false
   var expr = /\D/i;
   if(expr.test(phone))
   {
      id_span.innerHTML="* 不能輸入非數字字符";
      id_span.style.color="#F00";

      id_span.setAttribute("active","0");
      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))
   {
      var id_span=document.getElementById(id.name);
      id_span.innerHTML="* 輸入的郵箱格式有誤";
      id_span.style.color="#F00";

      id_span.setAttribute("active","0");
      return false;
   }
   return true;
}

//點擊輸入框時激活該輸入框
function active(obj)
{
var id=document.getElementById(obj.id);
id.style.backgroundColor="#FFF";
}

function lastCheck()
{
    //判斷註冊信息是否全部有效
       if(isSuccess())
       {
            document.getElementById("SUBMIT").removeAttribute("disabled");
       }
       else
       {
           document.getElementById("SUBMIT").setAttribute("disabled","disabled");
         }

}

//判斷註冊信息是否全部有效
function isSuccess()
{
   var username=document.getElementById("username").getAttribute("active");
   var password2=document.getElementById("password2").getAttribute("active");
   var IDNumber=document.getElementById("IDNumber").getAttribute("active");
   var phoneNumber=document.getElementById("phoneNumber").getAttribute("active");
   var email=document.getElementById("email").getAttribute("active");
   if(username==0|password2==0|IDNumber==0|phoneNumber==0|email==0)
   {
       //禁止註冊
       document.getElementById("SUBMIT").setAttribute("disabled","disabled");
       return false;
   }
   else
       {
         //允許註冊
            document.getElementById("SUBMIT").removeAttribute("disabled");
            return true;
       }
}

//當失去焦點時設置背景
function setBackground(obj)
{
   var id=obj.name;
   document.getElementById(id.toString().toUpperCase()).style.backgroundColor="#EEE";
}

//registerSuccess.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
      String username=request.getParameter("username");
      String password=request.getParameter("password");
      String IDNumber=request.getParameter("IDNumber");
      String phoneNumber=request.getParameter("phoneNumber");
      String email=request.getParameter("email");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>registerSuccess</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   
</head>

<body>
registerSuccess!!!!!! <br>
   <table id="TABLE" >
    <tbody>
        <tr>
           <td>用戶名：</td>
           <td>
                 <%=username %>
           </td>
        </tr>
        <tr>
           <td>密碼：</td>
           <td>
               <%=password %>
           </td>
        </tr>

        <tr>
           <td>身份證號：</td>
           <td>
              <%= IDNumber%>
           </td>
        </tr>
        <tr>
           <td>電話號碼：</td>
           <td>
              <%=phoneNumber %>
           </td>
        </tr>
        <tr>
           <td>Email：</td>
           <td>
               <%=email %>
           </td>
        </tr>
    </tbody>
    </table>
    <br>
</body>
</html>

//CSS

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

#TABLE{
   text-align:right;
   margin: auto;
   float:left;
}
#DIV_FORM{
   margin-left:300px;
}
#TABLE2{
   text-align:left;
   width:290px;
   height:240px;
}
#TABLE2 tr
{

   height:24px;
}
#TABLE2 span{
   display:none;
}

.cls_inpt
{
   height:30px;
   width:200px;
   background-color: #EEE;
   border-style: groove;
}

#SUBMIT{
   height:50px;
   width:90px;
   font-family: "微軟雅黑", "新宋體";
   font-size: 18px;
}

不是很完善，還存在一些問題沒處理，360瀏覽器下發起訪問時，js代碼不起作用，出不來效果？？火狐，谷歌，ie8試過都可正常運行。

Test_LD

發佈了42 篇原創文章 · 獲贊 17 · 訪問量 14萬+

私信關注

利用js實現用戶註冊檢驗改進版（nm360瀏覽器不兼容）

js 實現鼠標移動 div

如何將對象轉換成json格式，如何將json格式數據轉換成js對象

httpclient 獲取網頁內容

keytool 生成證書過程-瀏覽器導入證書

dos 下執行jar 包解決依賴的jar 包問題

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

利用js實現用戶註冊檢驗 改進版（nm360瀏覽器不兼容）

利用js實現用戶註冊檢驗改進版（nm360瀏覽器不兼容）