<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!="" && !/[email protected]+\.[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>