ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)

以下の機能が実装されています。

1. ユーザー名: onfouc は msg ルールを表示します。onkeyup は文字数をカウントします。中国語の文字は 2 文字です。onblur は合格かどうかを検証します。

2. メールボックス: onblur正規表現マッチング、正規表現は自分のニーズに合わせて書かれ、個人のニーズに合わせて変更することができます

3. パスワード: オンキーアップ時にパスワードの強度を表示し、オンブラー時にパスワードを検証し、同じ文字かどうか、すべて文字かすべて数字か、長さが要件を満たしているかどうかを確認します。

4. パスワードの確認: 前回と同じかどうかを確認します

5. 送信ボタンは、すべての入力が検証された後にのみ有効になります。それ以外の場合は無効です。

要点:

1. 中国語は2文字です。

関数 getLength(str) {
    str.replace(/[^\x00-xff]/g, "xx").lengthを返します。
    //x00-xff は ASCII コードのすべての 2 バイト文字を表します。この文は、すべての非 1 バイト文字を xx、つまり 2 つの 1 バイト文字に置き換えて、長さを計算することを意味します}

2. メール検証用の正規表現:

var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g

3. すべての文字は同じですか?

関数findStr(str, n){
    var temp = 0;
    for(var i = 0;i<str.length;i++){
        if(str.charAt(i)==n){
            温度++:
        };
    }
}

4. すべて数字ですか、それともすべて文字ですか?

 var re_n = /[^\d]/g;
 if(!re_n.test(str)){//すべて数値です}

 var re_n = /[^\a-zA-Z]/g ;
 if(!re_n.test(str)){//すべての文字}

5. ボタンは、すべてのフォーム検証に合格し、送信できる場合にのみ有効です。

//私のアプローチは、email_state などの検証識別子を各入力に追加し、別の検証関数を記述して、これら 4 つの入力の検証識別子を検証し、ボタンをクリック可能に設定します。そうでない場合はボタンは無効になります。そして、onblur ごとにこの検証関数を 1 回呼び出します。

完全なコードは次のとおりです。

関数レジスタ（）{
    var oName = document.getElementById("名前");
    var count = document.getElementById("count");
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var email = document.getElementById("email");
    var name_msg = document.getElementsByClassName("name_msg")[0];
    var psw_msg = document.getElementsByClassName("psw_msg")[0];
    var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
    var email_msg = document.getElementsByClassName("email_msg")[0];
    var psw = document.getElementById("psw");
    var psw2 = document.getElementById("psw2");
    var 強度 = getByClass("強度")[0].getElementsByTagName("スパン");
    var registerbtn = document.getElementById("送信");
    var oName_state = false;
    var email_state = false;
    var psw_state = false;
    var psw2_state = false;
    var name_length = 0;

    oName.onfocus = 関数() {
        name_msg.style.display = "インラインブロック";
    }
    oName.onkeyup = 関数() {
        count.style.visibility = "表示可能";
        name_length = getLength(this.value);
        count.innerHTML = name_length + "文字数";
        (name_length == 0)の場合{
            count.style.visibility = "非表示";
        }
    }
    oName.onblur = 関数() {
        //不正な文字が含まれています、空にできません、長さが 25 を超えています、長さが 6 文字未満です var re = /[^\w\u4e00-\u9fa5]/g;
        if (再テスト(this.value)) {
            name_msg.innerHTML = "<i class='fa fa-close'>不正な文字が含まれています</i>";
            oName_state = false;
        } それ以外の場合 (this.value == "") {
            name_msg.innerHTML = "<i class='fa fa-close'>空にすることはできません</i>";
            oName_state = false;
        } そうでない場合 (name_length > 25) {
            name_msg.innerHTML = "<i class='fa fa-close'> 25 文字を超えることはできません</i>";
            oName_state = false;
        } そうでない場合 (name_length < 6) {
            name_msg.innerHTML = "<i class='fa fa-close'>6 文字未満にすることはできません</i>";
            oName_state = false;
        } それ以外 {
            name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            oName_state = true;
        }
        チェックフォーム();
    }

    psw.onfocus = 関数() {
        psw_msg.style.display = "インラインブロック";
        psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6～16 文字の文字、数字、記号を単独で使用することはできません</i>"
    }
    psw.onkeyup = 関数() {
        （この値の長さ＞5）の場合{
            強度[1].className = "アクティブ";
            psw2.removeAttribute("無効");
            psw2_msg.style.display = "インラインブロック";
        } それ以外 {
            強度[1].className = "";
            psw2.setAttribute("無効", "");
            psw2_msg.style.display = "なし";
        }
        （この値の長さが10より大きい場合）{
            強度[2].className = "アクティブ";
            psw2.removeAttribute("無効");
            psw2_msg.style.display = "インラインブロック";
        } それ以外 {
            強度[2].className = "";
        }
    }
    psw.onblur = 関数() {
        // 空にすることはできません、同じにすることはできません、文字の長さは 6 ～ 16 です、すべて数字にすることはできません、すべて文字にすることはできません var m = findStr(psw.value, psw.value[0]);
        var re_n = /[^\d]/g;
        var re_t = /[^a-zA-Z]/g;
        if (this.value == "") {
            psw_msg.innerHTML = "<i class='fa fa-close'>空にすることはできません</i>";
            psw_state = false;
        } そうでない場合 (m == this.value.length) {
            psw_msg.innerHTML = "<i class='fa fa-close'> 同じ文字は使用できません</i>";
            psw_state = false;
        } それ以外の場合 (this.value.length < 6 || this.value.length > 16) {
            psw_msg.innerHTML = "<i class='fa fa-close'>長さは 6 ～ 16 文字にする必要があります</i>";
            psw_state = false;
        } そうでない場合 (!re_n.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>すべて数字にすることはできません</i>";
            psw_state = false;
        } そうでない場合 (!re_t.test(this.value)) {
            psw_msg.innerHTML = "<i class='fa fa-close'>すべて文字にすることはできません</i>";
            psw_state = false;
        } それ以外 {
            psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw_state = true;
        }
        チェックフォーム();
    }


    psw2.onblur = 関数() {
        (psw2.value != psw.value) の場合 {
            psw2_msg.innerHTML = "<i class='fa fa-close'>2 つの入力が矛盾しています</i>";
            psw2_state = false;
        } それ以外 {
            psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            psw2_state = true;
        }
        チェックフォーム();
    }

    email.onblur = 関数() {
        var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
        if (!re_e.test(this.value)) {
            email_msg.innerHTML = "<i class='fa fa-close'>正しいメール形式を入力してください</i>";;
            電子メールの状態 = false;
        } それ以外 {
            email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
            電子メールの状態 = true;
        }
        チェックフォーム();
    }
    関数チェックフォーム() {
        oName_state && oName_state && psw_state && psw2_state) の場合 {
            registerbtn.removeAttribute("無効");
            // registerbtn.className+=" "+"readySubmit";
            $("#submit").addClass("readySubmit");
        } それ以外 {
            registerbtn.setAttribute("無効", "");
            //registerbtn.className = registerbtn.className.replace( 新しい RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );  
            // registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );       
            $("#submit").removeClass("readySubmit");
        }
    }
}

関数 getLength(str) {
    str.replace(/[^\x00-xff]/g, "xx").lengthを返します。
}

関数findStr(str, n) {
    var temp = 0;
    (var i = 0; i < str.length; i++) の場合 {
        str.charAt(i) == nの場合{
            温度++;
        }
    }
    温度を返します。
}

HTMLコードの一部

<フォームid="フォーム">
   <div class="名前フィールド">
        <label>ユーザー名</label>
        <input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5〜25文字、1つの中国語文字は2文字です。中国語のメンバー名を使用することをお勧めします</i></span>
        <div id="count">0 文字</div>
   </div>
   <div class="email-field" 必須>
        <label>メールボックス</label>
       <input type="text" id="email" /><span class="msg email_msg"></span>
       </div>
   <div class="pwd-field" 必須>
        <label>パスワード</label>
        <input type="password" id="psw" /><span class="msg psw_msg"></span>
        <div class="強度">
            <span class="active">弱い</span><span>中程度</span><span>強い</span>
       </div>
   </div>
   <div class="pwd2-field" 必須>
        <label>パスワードの確認</label>
        <input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">もう一度入力してください</span>
   </div>
   <button type="submit" id="submit" disabled="" class="submitBtn">登録</button>
</フォーム>

CSS部分

.nameフィールド{
    上マージン: 10px
}

.emailフィールド{
    上マージン: 3px
}

.pwdフィールド{
    上マージン: 10px
}

.pwd2フィールド{
    上マージン: 10px
}

.register ラベル {
    フロート: 左;
    幅: 80ピクセル;
    右マージン: 10px;
    テキスト配置: 右
}

.register .name_msg、
.レジスタ .psw_msg、
.register .psw2_msg、
.register .email_msg {
    左マージン: 10px;
    表示: なし
}

。強度、
#カウント{
    左パディング: 90px;
    上マージン: 3px
}

#カウント{
    可視性: 非表示;
    色: #999;
    フォントサイズ: 12px
}

.intensity スパン {
    表示: インラインブロック;
    背景: #FBAA51;
    幅: 55px;
    高さ: 20px;
    テキスト配置: 中央
}

.強度 .アクティブ {
    背景: rgba(0, 128, 0, 0.61)
}

.register .submitBtn {
    幅: 163ピクセル;
    マージン: 10px 0 0 90px
}

＃提出する {
    色: #555
}

要約する

ネイティブ js を使用した通常のフォーム検証 (検証後にのみ送信) を実装する方法に関するこの記事はこれで終わりです。js を使用した通常のフォーム検証の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: