フォーム検証の2つの方法-(オリジナルJSとHtml 5)

オリジナル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のフォーム検証注意:html 5フォーム検証要点: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('');
        }
    }