jq之簡單表單驗證

時間 2019-11-29

原文原文鏈接

<body>

<form method="post" action="">
    <div class="int">
        <label for="username">用戶名:</label>
        <!-- 爲每一個須要的元素添加required -->
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">郵箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">我的資料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>

</body>

<script type="text/javascript">
//<![CDATA[
$(function(){
        /*
        *思路大概是先爲每個required添加必填的標記，用each()方法來實現。
        *在each()方法中先是建立一個元素。而後經過append()方法將建立的元素加入到父元素後面。
        *這裏面的this用的很精髓，每一次的this都對應着相應的input元素，而後獲取相應的父元素。
        *而後爲input元素添加失去焦點事件。而後進行用戶名、郵件的驗證。
        *這裏用了一個判斷is()，若是是用戶名，作相應的處理，若是是郵件作相應的驗證。
        *在jQuery框架中，也能夠適當的穿插一寫原汁原味的javascript代碼。好比驗證用戶名中就有this.value，和this.value.length。對內容進行判斷。
        *而後進行的是郵件的驗證，貌似用到了正則表達式。
        *而後爲input元素添加keyup事件與focus事件。就是在keyup時也要作一下驗證，調用blur事件就好了。用triggerHandler()觸發器，觸發相應的事件。
        *最後提交表單時作統一驗證
        *作好總體與細節的處理
        */
        //若是是必填的，則加紅星標識.
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>"); //建立元素
            $(this).parent().append($required); //而後將它追加到文檔中
        });
         //文本框失去焦點後
        $('form :input').blur(function(){
             var $parent = $(this).parent();
             $parent.find(".formtips").remove();
             //驗證用戶名
             if( $(this).is('#username') ){
                    if( this.value=="" || this.value.length < 6 ){
                        var errorMsg = '請輸入至少6位的用戶名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                    }else{
                        var okMsg = '輸入正確.';
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                    }
             }
             //驗證郵件
             if( $(this).is('#email') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '請輸入正確的E-Mail地址.';
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                      var okMsg = '輸入正確.';
                      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
             }
        }).keyup(function(){
           $(this).triggerHandler("blur");
        }).focus(function(){
             $(this).triggerHandler("blur");
        });//end blur

        
        //提交，最終驗證。
         $('#send').click(function(){
                $("form :input.required").trigger('blur');
                var numError = $('form .onError').length;
                if(numError){
                    return false;
                } 
                alert("註冊成功,密碼已發到你的郵箱,請查收.");
         });

        //重置
         $('#res').click(function(){
                $(".formtips").remove(); 
         });
})
//]]>
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。