自學前端之js登錄界面完善--表單驗證

前言

前面用css做了註冊頁面，要了解點擊查看->註冊頁面
平時我們在網上註冊時如果有沒有填的會有提示信息，如果兩次輸入的密碼不一致也會出現提示信息，思路現在就寫一下這個提示信息的效果是怎麼實現的，順便理解js。

正文

提示信息的這種需要用到javascript（簡稱js）腳本語言，這裏呢就這個項目，可以好好理解一下js的用法。js腳本語言的書寫也是有兩種寫法的，同CSS一樣，可以寫到內部，也可也寫到外部（然後再導入）即可，js語句也和css語句放置的位置一樣。都是放到頭部標籤內，下面就來看一下這個小項目。
整體思路：先要判斷郵箱輸入框是否爲空或者是否爲默認值，那麼就要獲取到輸入框的值，再通過獲取元素值的判斷，從而實現提示信息的效果。

1.因爲我們要獲取到input的輸入值，所以是對錶單操作，這裏給表單上添加onsubmit事件，表示在提交表單時調用js中的函數。這裏給在函數之前加上return是將函數的返回值賦值給onsubmit，由下文知當返回值爲false時會終止執行表單操作，可見其return的重要性。

 <form class="register " οnsubmit="return chk();">/*調用js中的chk()函數*/

2.判斷是否填寫郵箱地址，要獲取到郵箱輸入框的值，可以通過名字name來獲取，要保證郵箱輸入框有自己的name，代碼如下;

<input type="email" class="register-input" name="emailname" placeholder="請輸入郵箱地址">

準備工作做足，然後就可以開始寫js了，在頭部標籤內寫js；

  <script type="text/javascript">/*javascript類型*/
        function chk() { //自定義chk函數
            //判斷郵箱是否填寫
            var inpuser = document.getElementsByName("emailname")[0];/*獲取郵箱輸入框的對象並賦值給inpuser*/
            if (inpuser.value == "" || inpuser.value == "請輸入郵箱地址") {/*判斷是否爲空或者是否爲默認值*/
                alert("請輸入郵箱");/*顯示提示對話框*/
                return false;/*返回false*/
            }
        }

注：1.var，在js中變量可以聲明也可不聲明，這裏用var是聲明inpuser爲全局變量。
       2.document.getElementsByName()方法可返回帶有指定名稱的對象的集合，這裏可以理解成獲得郵箱輸入框的對象。
       3.[0]表示獲取頁面上第一個name爲"email"的對象。（因爲可能會存在相同的name）
       4.inpuser.value 表示inpuser這個對象的數據成員value。

2.在驗證密碼是是否填寫的道理和驗證郵箱是一致的，只有輸入密碼才能驗證密碼是否一致，首先應該判斷一下是否填寫密碼，這裏呢寫的腳本代碼還是在chk（）函數中寫，因爲這幾個輸入框都是在一個表單裏面操作的，且函數是在表單中調用。
a.給密碼輸入<input>添加name “passwd”

 <input type="password" class="register-input" name="passwd" placeholder="請輸入密碼">

b.在chk（）函數中寫密碼輸入框的腳本代碼。

 var ipasswd = document.getElementsByName("passwd")[0];
    if (ipasswd.value == "" || ipasswd.value == "請輸入密碼")
            {
                alert("請輸入密碼");
                return false;
            }

3.驗證兩次輸入的密碼是否一致。
a.首先應該給驗證密碼輸入框 添加name “passwdfn”.

<input type="password" class="register-input"  name="passwdfn" placeholder="請再次輸入密碼">

b.在chk（）函數中寫驗證密碼輸入框的腳本代碼，判斷兩個密碼是否一致即可。

 var ipassdfn = document.getElementsByName("passwdfn")[0];
   if (ipasswd.value != ipassdfn.value)
            {
                alert("兩次密碼不一致");
                return false;
            }

就這樣，登錄界面完善就做好了。

總結

剛剛接觸js，可能會比較生疏，比如某一些單詞容易拼錯會導致運行不出來，這裏新掌握一個技巧，如果有效果出不來可以在網頁上按F12,在控制檯中就能看到錯誤信息，也有可能是元素獲取不到，可以在控制檯中使用console.loig()函數查看元素是否拿到。學習前端的路還很長，繼續補充能量吧！