手寫表單及h5表單驗證舉例

表單是一個很重要的概念，這裏涉及到收集數據以及驗證數據，以及表單的用戶體驗。一般ui框架會有封裝好的這些功能。

這裏複習一下手寫表單，順帶複習一下表單的基本屬性，基本樣式和h5的表單驗證。

一個表單基本包含一個html結構，即表單結構，針對html的樣式，表單驗證，表單提交。這裏會把前三項的相關代碼貼出來。大家組合到一個html頁面之中，就可以形成一個完整的功能。

表單基本結構

一般包含 label(optional), input,錯誤提示。錯誤提示的形式各式各樣，有h5自帶的樣式，也可以自定義一個。下面舉例一個包含用戶名和郵箱的表單。其中用戶名驗證是否填寫，長度在3-15字符以內，郵箱驗證是否填寫，是否符合郵箱類型。

<form class="form" action="">
        <h4>表單的功能及校驗</h4>
        <!-- text -->
        <div class="input-block">
            <label for="userName" class="input-label">用戶名：</label>
            <input type="text" 
                name="userName" 
                id="userName" 
                required
                minlength="3"
                maxlength="15"
                placeholder="請輸入用戶名">
            <span class="err-msg">3~15字符</span>
            <!-- <span class="inform-msg">3~15字符</span> -->
        </div>
        <!-- email -->
        <div class="input-block">
            <label for="mail" class="input-label">郵箱：</label>
            <input type="email" 
                required
                name="mail" 
                id="mail" placeholder="請輸入郵箱">
            <span class="err-msg"></span>
        </div>

        <!-- submit -->
        <div class="button" onclick="submitData()">提交</div>
    
    </form>

表單基本樣式

針對以上的html,做簡單的樣式書寫。表單整體居中，提示語在最右端顯示。錯誤時爲紅色。這裏簡單貼一下代碼。

<style>
        .form{
            text-align:center;
        }
        .form .input-block{
            position:relative;
            margin:0 auto;
            padding:15px 0;
            width:700px;
        }
        .form .input-block .input-label{
            display:inline-block;
            text-align:left;
            width:80px;
        }
        .form .input-block .err-msg{
            position:absolute;
            left:480px;
            top:17px;
            font-size:12px;
            color:#333;
            
        }
        .form .button{
            margin:0 auto;
            width:42px;
            height:20px;
            line-height:20px;
            padding:5px;
            text-align:center;
            border-radius: 5px;
            background:#ccc;
            font-size:13px;
        }

表單驗證

h5自帶了表單驗證，驗證後的提示信息，也有自帶的，也可以自己寫。這裏是自己寫樣式，見上面。表單有一些自帶的屬性，如min,max,step,minLength,maxLength,type="email",type="number"....等等，都與表單驗證有關係。大家可以打印出元素的validity屬性，例如，在某個觸發事件下，console.log(this.validity),結果是一個叫做validityState對象，如下，

針對如上表單，驗證用戶名及密碼，效果和代碼如下所示：

 

<script>
        //用戶名
        let userName=document.getElementById('userName');
        userName.onblur=function(){
            let errMsg=document.querySelector("#userName+.err-msg");
            console.log(this.validity)
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用戶名不可以爲空'
            }else if(this.validity.tooLong){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用戶名不可以超過15字符'
            }else if(this.validity.tooShort){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='用戶名不可以短過3個字符'
            }else{
                errMsg.style.color="#333"
                errMsg.innerHTML='3~15字符'
            }
        }
        //郵箱
        let mail=document.getElementById('mail');
        mail.onblur=function(){
            let errMsg=document.querySelector("#mail+.err-msg");
            if(this.validity.valueMissing){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='郵箱不能爲空喔'
            }else if(this.validity.typeMismatch){
                errMsg.display='block';
                errMsg.style.color="red"
                errMsg.innerHTML='輸入無效,請輸入郵箱地址'
            }else{
                errMsg.display='none';
                errMsg.style.color="#333"
                errMsg.innerHTML=''
            }
        }

        //表單提交
        function submitData(){
            console.log("在這裏提交表單")
        }

    
    </script>

 

表單提交

這裏不再貼出表單提交的代碼，純粹原生的話，需要封裝一個函數，逐個獲取到數據。本質上上form.elements可以獲得所有的表單。可以通過element.value獲得表單的值。element.checked看單/複選的選擇情況，這些都是表單的共有的屬性。如果是在框架中寫，比如Vue中，則很容易獲取到對應的變量。一般一個表單是一個變量，其下有對應的數據。驗證之後，將變量提交給後臺。

關於vue中的數據提交，可以見我之前寫的一篇文章，大致如文中所述

https://blog.csdn.net/mia1106/article/details/79552560

注意這裏使用的div提交，沒有使用自帶的input type="submit",注意這個提交時會自帶刷新，一般需要阻止自帶事件。由於現在表單基本上是異步提交，自己寫提交函數，所以，我選擇了自己寫提交標籤。