原生JS的表單驗證

html部分

<form>
<div>
    <label>使用者名稱：</label><input type="text" id="txtUsername">
    <div id="labUsername" >使用者名稱長度4-6位字母和數字組合</div>
</div>

<div>
    <label>密碼：</label><input type="text" id="txtPassword">
    <div
 
 id="labPassword">密碼長度為6-12位</div>
</div>
<button>註冊</button>
</form>

Js程式碼部分
注：監聽表單的submit事件前提是表單必須寫在form裡，如果沒有form就監聽按鈕的onclick事件

//監聽表單submit事件          
form.onsubmit = function(){

        var usernamePattern = /^[A-Za-z][0-9A-Za-z]{3,5}$/;

        if(!usernamePattern.test(txtUsername.value)){
            labUsername.className = 'error'
 
;
            labUsername.innerText = '使用者名稱格式不正確！請輸入4-16位的字母和數字！'
            return false;
        }
        labUsername.className = 'success';
        labUsername.innerText = '輸入正確'


        if(txtPassword.value.length < 6 || txtPassword.value.length >12){
            labPassword.className = 'error'
 
;
            labPassword.innerText = '密碼格式不正確！請輸入6-12位的字母和數字！';
            return false;
        }
        labPassword.className = 'success';

        return true;
    }

//監聽元素獲取焦點失去焦點事件
txtUsername.onfocus = function(){
    labUsername.className = '';
}
txtUsername.onblur = function(){
    if(txtUsername.value.length <4 || txtUsername.value.length>6){
        labUsername.className = 'error';
    }else{
        labUsername.className = 'success';
    }
}


txtPassword.onfocus = function(){
    labPassword.className = '';
}
txtPassword.onblur = function(){
    var passwordPattern = /\S{4,12}/;
    if(!passwordPattern.test(txtPassword.value)){
        labPassword.className = 'error';
    }else{
        labPassword.className = 'success';
    }
}

Html的表單驗證
注：html5表單驗證要點：
1、form標籤不能有novalidate屬性，該屬性是忽略表單元素驗證的
2、input標籤一定要有required 和pattern 屬性
3、必須要有form和提交按鈕
4、然後再指令碼部分監聽input的oninput 和 oninvalid事件 ，使用validity 物件的相關屬性

html程式碼部分

<form>
    <div>
        <label>使用者名稱：</label><input type="text" id="txtName" placeholder="請輸入使用者名稱" required="" pattern="[A-Za-z][0-9A-Za-z]{3,15}">
    </div>
    <div>
        <label>密碼：</label><input type="password" id="txtPassword" placeholder="請輸入密碼" required="" pattern="\d{6}">
    </div>
    <button>註冊</button>
</form>

JS程式碼部分

window.onload = function(){
    var txtName = document.querySelector('#txtName');
    var txtPassword = document.querySelector('#txtPassword');
//監聽oninvalid 和oninput 事件
    txtName.oninvalid = checkUserName;
    txtName.oninput = checkUserName;

    function checkUserName(){
        if(this.validity.valueMissing){ //validity物件相關屬性
            this.setCustomValiduty('使用者名稱不能為空');
        }
        else if(this.validity.patternMismatch){
            this.setCustomValidity('使用者名稱格式無效，必須....');
        }
        else{
            this.setCustomValidity('');
        }
    }

    txtPassword.oninvalid = checkPassword;
    txtPassword.oninput = checkPassword;

    function checkPassword(){
        if(this.validity.valueMissing){
            this.setCustomValidity('密碼不能為空.');
        }
        else if(this.validity.patternMismatch){
            this.setCustomValidity('密碼必須為6位數字.');
        }
        else{
            this.setCustomValidity('');
        }
    }