<form method="post" action=""> <div class="int"> <label for="username">用戶名:</label> <input type="text" id="username" class="required"/> </div> <div class="int"> <label for="username">郵箱:</label> <input type="text" id="email" class="required"/> </div> <div class="int"> <label for="username">我的資料:</label> <input type="text" id="personinfo"/> </div> <div class="sub"> <input type="submit" value="提交" id="send"/> <input type="reset" id="res"/> </div> </form> $(function(){ $("form :input.required").each(function(){ var $required = $("<strong class='high'>*</strong>"); //$(this).parent().append($required); //追加到文檔中 $(this).parent().prepend($required); }); $('form :input').blur(function(){ var $parent = $(this).parent(); 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>'); } } }); $("form :input").focus(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); }); $("#send").click(function(){ var $parent = $(this).parent().parent(); $parent.find(".formtips").remove(); $("form .required:input").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } }); $("#res").click(function(){ var $parent = $(this).parent().parent(); $parent.find(".formtips").remove(); }); });