基于jquery實現(xiàn)即時檢查格式是否正確的表單_

1、基于jquery實現(xiàn)即時檢查格式是否正確的表單_ 這篇文章主要為大家具體介紹了基于jquery實現(xiàn)即時檢查格式是否正確的表單具體代碼，感愛好的小伙伴們可以參考一下 現(xiàn)在許多網(wǎng)站的注冊模塊都可以實現(xiàn)即時檢查格式是否正確，這樣極大的增加了用戶體驗，對開發(fā)特別有利。 下面的代碼是利用jquery實現(xiàn)了對一個表單字段格式的即時檢查（包括字段長度、郵箱格式），同時在提交時，再次動身檢查大事。 留意這個檢查是keyup和focus上為主，利用這兩個大事來觸發(fā)blur（失去焦點）大事。 html head meta charset=utf-8 / title/title link href=css/styl

2、e.css rel=stylesheet type=text/css / script src=jquery-1.3.2.min.js/script script $(function () /為每個必填字段后面加上* $(form :input.required).each(function () var $required = $(strong class=high*/strong); $(this).parent().append($required); ); /textbox失去焦點大事 $(form :input).blur(function () var $parent = $(t

3、his).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 ($(th

4、is).is(#email) if (this.value = | (this.value != !/.+.+.a-zA-Z2,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).trigger

5、Handler(blur);/keyup和focus利用triggerHandler來觸發(fā)blur大事 ).focus(function () $(this).triggerHandler(blur); ); $(#send).click(function () /提交按鈕大事 $(form .required:input).trigger(blur); var numError = $(form .onError).length; if(numError) return false; alert(注冊勝利，密碼已發(fā)到你的郵箱，請查收); ); ); /script /head body fo

6、rm method=post action= div class=int label for=username用戶名/label 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=提交 i