2. 程式人生 > 程式設計 >用js實現使用者註冊功能

用js實現使用者註冊功能

阿新 • • 發佈：2021-09-23

本文例項為大家分享了實現使用者註冊功能的具體程式碼，供大家參考，具體內容如下

1.HTML程式碼結構

<BODY>
       <FORM action="success.html" method="post" name="myform"  onSubmit="return checkForm()">
                <TABLE   border="0" cellpadding="0" cellspacing="0" align="center">
                    <TR>
                        <TD height="108" colspan="2"><IMG src="D:\Microsoft VS Code\421\img\touxiang.png"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">使用者名稱：</TD>
                        <TD width="524"><INPUT name="txtUser" type="text" maxlength="16">只能輸入字母或數字，4-16個字元</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">密碼：</TD>
                        <TD width="524"><INPUT name="txtPass" type="password">密碼長度6-12位</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">確認密碼：</TD>
                        <TD width="524"><INPUT name="txtRPass" type="password"></TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">性別：</TD>
                        <TD width="524">
                            <INPUT name="gen" type="radio"   value="男" checked>男&nbsp; 
                            <INPUT name="gen" type="radio" value="女" class="input">女
                        </TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">電子郵件地址：</TD>
                        <TD width="524"><INPUT name="txtEmail" type="text">
                        輸入正確的Email地址</TD>
                    </TR>
                    <TR>
                        <TD width="107" height="36">出生日期：</TD>
                        <TD width="524">
                            <INPUT name="year"   id="year" size=4 maxlength=4 >&nbsp;年&nbsp;&nbsp;
                                <SELECT name="month"  >
                                    <OPTION value=1>一月</OPTION>
                                    <OPTION value=2>二月</OPTION>
                                    <OPTION value=3>三月</OPTION>
                                    <OPTION value=4>四月</OPTION>
                                    <OPTION value=5>五月</OPTION>
                                    <OPTION value=6>六月</OPTION>
                                    <OPTION value=7>七月</OPTION>
                                    <OPTION value=8>八月</OPTION>
                                    <OPTION value=9>九月</OPTION>
                                    <OPTION value=10>十月</OPTION>
                                    <OPTION value=11>十一月</OPTION>
                                    <OPTION value=12>十二月 </OPTION>
                                </SELECT>&nbsp;月&nbsp;&nbsp;
                                 <SELECT name="day"  >
                                    <OPTION value=1>1</OPTION><OPTION value=2>2</OPTION><OPTION value=3>3</OPTION><OPTION value=4>4</OPTION>
                                    <OPTION value=5>5</OPTION><OPTION value=6>6</OPTION><OPTION value=7>7</OPTION><OPTION value=8>8</OPTION>
                                    <OPTION value=9>9</OPTION><OPTION value=10>10</OPTION><OPTION value=11>11</OPTION><OPTION value=12>12 </OPTION>
                                    <OPTION value=13>13</OPTION><OPTION value=14>14</OPTION><OPTION value=15>15</OPTION><OPTION value=16>16</OPTION>
                                    <OPTION value=17>17</OPTION><OPTION value=18>18</OPTION><OPTION value=19>19</OPTION><OPTION value=20>20</OPTION>
                                    <OPTION value=21>21</OPTION><OPTION value=22>22</OPTION><OPTION value=23>23</OPTION><OPTION value=24>24</OPTION>
                                    <OPTION value=25>25</OPTION><OPTION value=26>26</OPTION><OPTION value=27>27</OPTION><OPTION value=28>28</OPTION>
                                    <OPTION value=29>29</OPTION><OPTION value=30>30</OPTION><OPTION value=7>31</OPTION>
                                </SELECT>&nbsp;日 
                        </TD>
                    </TR>
                    <TR>
                      <TD colspan="2" align="center">
                        <INPUT type="submit" value="同意以下協議條款並提交">
                      </TD>
                   </TR>
                  <TR>
                     &www.cppcns.com
 
lt;TD colspan="2">
                        <TEXTAREA cols="" rows="" readOnly="true" style="width:480px;height:110px;font-size:12px;color: #666">
                            一、總則
                            
                            1．1　使用者應當同意本協議的條款並按照頁面上的提示完成全部的註冊程式。使用者在進行註冊程式過程中點選"同意"按鈕即表示使用者與百度公司達成協議，完全接受本協議項下的全部條款。
                            1．2　使用者註冊成功後，百度將給予每個使用者一個使用者帳號及相應的密碼，該使用者帳號和密碼由使用者負責保管；使用者應當對以其使用者帳號進行的所有活動和事件負法律責任。
                            1．3　使用者可以使用百度各個頻道單項服務，當用戶使用百度各單項服務時，使用者的使用行為視為其對該單項服務的服務條款以及百度在該單項服務中發出的各類公告的同意。
                            1．4　百度會員服務協議以及各個頻道單項服務條款和公告可由百度公司隨時更新，且無需另行通知。您在使用相關服務時,應關注並遵守其所適用的相關條款。
                            　　您在使用百度提供的各項服務之前，應仔細閱讀本服務協議。如您不同意本服務協議及/或隨時對其的修改，您可以主動取消百度提供的服務；您一旦使用百度服務，即視為您已瞭解並完全同意本服務協議各項內容，包括百度對服務協議隨時所做的任何修改，併成為百度使用者。
      
 
                   </TEXTAREA>
                     </TD>
                  </TR>
                </TABLE>
      </FORM>
</BODY>

注意圖片需要你自己新增

用js實現使用者註冊功能

2.JS程式碼結構

<SCRIPT  type="text/" language="script">
                function checkForm(){
                    if(checkUserName()&&checkPass()&&checkEmail()&&checkDate()){
                        return true;
                    }else{
                        return false;
                    }
                }
                //使用者名稱非空驗證+長度驗證+合法性驗證
                function checkUserName(){
                    var name = document.myform.txtUser;
                    if(name.value==""){
                        alert("請輸入使用者名稱");
                        name.focus();
                        return false;
                    }else if(name.value.length<4||name.value.length>16){//使用者名稱長度驗證
                        alert("使用者名稱輸入的長度4-16個字元");
                        name.select();
                        return false;
                    }
                    //使用者名稱輸入合法性驗證
                    for(var i=0;i<name.value.length;i++)
                    {
                        var charTest=name.value.toLowerCase().charAt(i);
                        if( (!(charTest>='0' && charTest<='9')) &&  (!(charTest>='a' && charTest<='z'))  && (charTest!='_') )
                        {
    
 
                    alert("會員名包含非法字元，只能包括 a-z、0-9 和下劃線");
                        name.selechttp://www.cppcns.comt();
                        return false;
                        }
                    }
                    return true;
                }
                //密碼非空驗證+確認驗證+長度驗證
                function checkPashttp://www.cppcns.coms(){
                    var pass=document.myform.txtPass;
                    var rpass=document.myform.txtRPass;
                    if(pass.value==""){
                        alert("密碼不能為空");
                        pass.focus();
                        return false;
                    }else if(pass.value.length<6||pass.value.length>12){
                        alert("密碼長度為6-12個字元");
                        pass.select();
                        return false;
                    }
                    //確認密碼一致性驗證
                    if(rpass.value!=pass.value){
                        alert("確認密碼與密碼輸入不一致");
                        rpass.select();
                        return false;
                    }
                    return true;
                }
                
                //電子郵件驗證
                function checkEmail(){
                    var strEmail=document.myform.txtEmail;
                    if (strEmail.value.length==0)
                    {
                        alert("電子郵件不能為空!");
                        strEmail.focus();
                        return false;
                    }else if (strEmail.value.indexOf("@",0)==-1)
                    {
                        alert("電子郵件格式不正確\n必須包含@符號！");
                        strEmail.select();
                        return false;
                    }else if (strEmail.value.indexOf(".",0)==-1){
                        alert("電子郵****---件格式不正確\n必須包含.符號！");
                        strEmail.select();
                        return false;
                    }//@和.字元不能在句首
                    else if(strEmail.value.charAt(0)=="@"||strEmail.value.charAt(0)=="."){
                        alert("符號@和符號.不能在郵件地址第一位");
                        strEmail.select();
                        return false;+
                    }//@和.字元不能在句尾
                    else if(strEmail.value.charAt(strEmail.value.length-1)=="@"||strEmail.value.charAt(strEmail.value.length-1)=="."){
                        alert("符號@和符號.不能在郵件地址最後一位");
                        strEmail.select();
                        return false;
                    }
                    return true;
                }
                //驗證出生年份
                function checkDate(){
                    var year = document.myform.year;
                    var time=new Date();
                    if(year.value==""){//非空驗證
                        alert("請輸入出生年份");
                        year.focus();
                        return false;
                    }else if(isNaN(year.value)){//是否是數字驗證
                        alert("請輸入數字");
                        year.focus();
                        return false;
                    }else if(parseInt(year.value)<1949||parseInt(year.value)>time.getYear()){//輸入範圍驗證
                        alert("年份範圍從1949-"+time.getYear()+"年");
                        year.select();
                        return false;
                    }else{
                        return true;
                    }
                }
</SCRIPT>

3.效果展示如下：

用js實現使用者註冊功能

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

用js實現使用者註冊功能

本文例項為大家分享了實現使用者註冊功能的具體程式碼，供大家參考，具體內容如下

用eclipse編輯資料庫裡面的登入註冊功能使用md5對密碼進行加密

簡單的md5演算法： package com.train.util; import java.math.BigInteger; import java.security.MessageDigest;

用js的getSelection()實現型別電子書閱讀器的劃詞文字高亮選中功能

技術標籤：js 這裡只是一個demo幫助理解文字高亮選中的實現原理，還有多段選中，重複選中等功能沒有實現，如果想用現成的產品可以參考一位大佬的部落格https://segmentfault.com/a/1190000018981813

js實現登陸與註冊功能

本文例項為大家分享了實現登陸與註冊功能的具體程式碼，供大家參考，具體內容如下

用JS建立一個錄屏功能

OBS studio很酷，但更酷，現在，我們用 Script 建立自己的錄屏功能。 首先，建立一個HTML檔案，包含記錄按鈕和一個播放標籤，

Java 用註解實現通用功能-csv檔案的讀取為例

引言 使用java註解可以實現一些共通的功能，假設有幾種格式的csv檔案，編碼，分隔符，頭部行數之類的定義各不相同，但我們想統一的處理他們，那就需要一個共通的方法。

python應用檔案讀取與登入註冊功能

python應用檔案讀取與登入註冊功能，具體實現程式碼如下所示： #!/usr/bin/python3

用js限制網頁只在微信瀏覽器中開啟(或者只能手機端訪問)

用js限制網頁只在微信瀏覽器中開啟 js $(function(){ //判斷頁面是否是在微信瀏覽器開啟

SpringBoot使用郵箱傳送驗證碼實現註冊功能

本文為大家分享了SpringBoot使用郵箱傳送驗證碼實現註冊功能例項，供大家參考，具體內容如下

Django專案學習5--註冊功能2，session和redis快取驗證碼（流水賬）

前面利用了uuid加圖形驗證碼的方式來進行驗證，一般驗證碼都有個過期時間。下面來設定過期時間。

用js編寫留言板

本文例項為大家分享了js編寫留言板的具體程式碼，供大家參考，具體內容如下

用JS實現選項卡

本文例項為大家分享了JS實現選項卡的具體程式碼，供大家參考，具體內容如下

詳解用js程式碼觸發dom事件的實現方案

背景 前端編寫測試用例時，在測試介面上的一些效果時，通常都希望能夠模擬一些使用者操作，而模擬使用者操作最主要的方式就是用程式碼觸發指定事件。通常一些元素上會自帶一些觸發事件的方法，例如click、focus等，

Java簡易登入註冊功能實現程式碼解析

雜湊演算法（Hash）又稱摘要演算法（Digest），它的作用是：對任意一組輸入資料進行計算，得到一個固定長度的輸出摘要。

Windows10內建的升級助手怎麼用？老司機教你用win10升級助手功能

Win10系統之後備受使用者們喜愛，其中內建有很多實用功能，比如升級助手，它是一款可以幫助我麼升級win10 系統的一種工具，可能不少的使用者都不知道如何使用Win10升級助手，其實使用此功能不需要很強的專業知識，這

用js製作論壇發貼

需求說明 單擊我要發貼，彈出發貼介面 在標題框中輸入標題，選擇所屬版塊，輸入帖子內容 單擊“釋出”按鈕，新發布的帖子顯示在列表的第一個，新帖子顯示頭像、標題、版塊和釋出時間 使用陣列

用js製作簡易計算器

做一個簡易計算器，效果圖片 c表示清空，為一個空字串 +/-表示該值為正還是負

原生js實現from功能

程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

輸人10個學生5門課的成績,分別用函式實現下列功能:

輸人10個學生5門課的成績,分別用函式實現下列功能: ①計算每個學生的平均分;

用JS進行Base64編碼、解碼

vue裡面可以引入 require(\'js-base64\').Base64 js中的話可以使用 window.btoa() // 編碼 window.atob() // 解碼