JavaScript Validation驗證框架使用手冊.docx

JavaScript Form Validation驗證框架使用手冊譯 劉海剛使用客戶端JS效驗用戶在網頁表單的輸入是一種很不錯的方式，但當表單中的字段繁多時，這種效驗工作也隨之復雜。該效驗框架使之變得更加簡單。本手冊主要講解內容：l 下載Javascript表單驗證腳本文件。l 表單驗證腳本的使用。l 如何增加一個自定義驗證器。l 各個驗證器的描述。l “條件”驗證器。l 自定義代碼觸發(fā)提交。獲取JavaScript Form Validation首先，到以下網址下載最新的驗證框架文件：/files/form-validation/javascript_form.zip或者使用下載后的zip文件中包含了驗證框架js腳本文件和使用范例。腳本中內置了幾乎所有常見的驗證類型。驗證框架的主要思想是為需要驗證的表單中的所有表單控件定義“驗證描述符”集?！膀炞C描述符”無非是個字符串而已，表示每個表單控件元素使用哪種驗證，表單控件可以擁有0到多個驗證器，例如：你可以要求輸入控件不得為空，且必須在25個字符內，且為數(shù)字。換句話說，就是你可以為輸入框設定多個“驗證描述符”。表單驗證腳本的使用1. 在需要驗證的HTML頁，結束標簽前添加gen_validatorv4.js（gen_validatorv4.js在下載后的zip文件中，解壓即可）：2. 緊接著在你需要驗證的表單后面，通過表單的名字或ID創(chuàng)建Validator()對象：3. 現(xiàn)在增加“必填”驗證器addValidation()的方法格式：frmvalidator.addValidation(字段名, 驗證器描述符, 驗證失敗信息);驗證失敗信息是可選的，如果不給定則使用框架默認失敗信息。你可以繼續(xù)添加一個數(shù)字的校驗器：示例下面是一個完整的示例：First Name:Last Name:EMail:Phone:Address:Country:choose yoursAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaArubavar frmvalidator = new Validator(myform);frmvalidator.addValidation(FirstName,req,Please enter your First Name);frmvalidator.addValidation(FirstName,maxlen=20,Max length for FirstName is 20);frmvalidator.addValidation(LastName,req);frmvalidator.addValidation(LastName,maxlen=20);frmvalidator.addValidation(Email,maxlen=50);frmvalidator.addValidation(Email,req);frmvalidator.addValidation(Email,email);frmvalidator.addValidation(Phone,maxlen=50);frmvalidator.addValidation(Phone,numeric);frmvalidator.addValidation(Address,maxlen=50);frmvalidator.addValidation(Country,dontselect=000);其他一些注意事項：l 表單驗證器必須創(chuàng)建在HTML表單后（即在標簽后）l 你的表單必須有唯一的一個名稱，如果在同一個頁面中有多個form對象，則需要添加多個驗證器為每一個表單做驗證。驗證器之間不會沖突。l 如果你使用這個驗證框架，則不能使用onsubmit事件，因為驗證器腳本會自動覆蓋onsubmit事件。如果你想添加一個自定義的驗證器，請參考下面的章節(jié)。添加一個自定義驗證器如果你不想使用內置的驗證描述符，想添加一個自定義的驗證器，你可以這樣做，參考下面的步驟：1. 創(chuàng)建一個返回ture或false的js方法：sfm_show_error_msg()方法用你選擇的風格顯示錯誤信息。2. 用驗證器對象關聯(lián)驗證方法：自定義驗證方法會在其他驗證器之后自動執(zhí)行。如果你想要做更多的驗證，則把需要驗證的方法寫在同一個方法中：其中DoMyValidationOne() 和 DoMyValidationTwo()方法都是自定義的驗證方法清除驗證器有時根據(jù)頁面要求可能會在運行時動態(tài)的更改驗證器的必要性，為這種情況考慮，有種方法可以清除驗證器對象中所有的驗證器：設置驗證失敗時的焦點獲取默認情況下，當有驗證失敗發(fā)生時，焦點會自動被設置到驗證失敗的輸入控件上，你可以禁用這種行為：驗證描述符介紹驗證描述符用法required req字段不得為空。注意：驗證的控件為輸入框和TextArea多行文本框.對于像下拉菜單和單選按鈕組的“選擇”，請使用適當?shù)尿炞C，如“dontselect或selone_radio”的。maxlen=?maxlength=?限制輸入框的字符長度。例如，如果允許輸入的長度最大為25個字符，則設置驗證描述符為“maxlen=25”minlen=?minlength=?檢查輸入的字符最小長度，例如“minlen=5”alphanumericalnum限定輸入框僅允許輸入字母和數(shù)字。注意，空格和標點符號也不允許，因為這些不是字母或數(shù)字alphanumeric_spacealnum_s限定輸入框僅允許輸入字母、數(shù)字和空格numnumeric僅允許數(shù)字alphaalphabetic僅允許字母alpha_salphabetic_space僅允許字母和空格email驗證字段是否為合法的郵件地址格式。（注意，這并不驗證郵件地址是否存在）lt=?lessthan=?驗證數(shù)據(jù)是否小于指定值，該字段必須為數(shù)字類型字段。例如一個值只能小于1000，則設置驗證描述符為“l(fā)t=1000”gt=?greaterthan=?驗證數(shù)據(jù)是否大于指定值，該字段必須為數(shù)字類型字段。例如一個值只能大于10，則設置驗證描述符為“gt=10”regexp=?驗證輸入是否匹配一個正則表達式。例如：“regexp=A-Za-z1,20$”表示允許輸入1-20個字母。dontselect=?該驗證描述符僅用于下拉框。下拉選項通常使用一個選項類似“-請選擇-”（該選項通常也被成為默認選中的），用戶需要選擇一個“-請選擇-”之外的其他選項。如果這個默認選項的value為“000”，則驗證描述符應該被設置為“dontselect=000”dontselectchk=?該驗證描述符僅用于復選框。用戶不能選擇該復選框。用復選框的值代替“?”。例如：dontselectchk=onshouldselchk=?該驗證描述符僅用于復選框。用戶需選擇該復選框。用復選框的值代替“?”。例如：shouldselchk=onselone_radio驗證是否選中了單選框的某一項。例如：比較兩個輸入控件eqelmnt=?比較兩個輸入框的值是否相等。例如，密碼和確認密碼。用另一個控件的名字替換“?”。例如：neelmnt=?判斷兩個輸入框的值是否不等。例如：ltelmnt=?判斷輸入框的值是否小于另一個輸入框的值。用另一個控件的名字替換“?”。leelmnt=?判斷輸入框的值是否小于或等于另一個輸入框的值。用另一個控件的名字替換“?”。gtelmnt=?判斷輸入框的值是否大于另一個輸入框的值。用另一個控件的名字替換“?”。geelmnt=?判斷輸入框的值是否大于或等于另一個輸入框的值。用另一個控件的名字替換“?”。其他對于驗證描述符，從最新版的示例中看出，上述官方的表格列出的并不全：對于復選框：selmin=?：復選框最少選擇的數(shù)量。selmax=?：復選框最多選擇的數(shù)量。對于file框：file_extn=?：限定文件的擴展名。例如：file_extn=jpg;gif;png。req_file：文件上傳必填。驗證信息的顯示方式如果不做任何編碼，則當驗證框架檢測到一個驗證失敗的信息就會提示，而非等到全部驗證之后再提示所有不符合驗證規(guī)則的輸入項?？捎孟旅娲a開啟全部驗證后提示的功能：frmvalidator.EnableMsgsTogether();采用彈出框的形式提示默認采用彈出框的形式提示。例如：提示信息顯示在頁面上你可以顯示錯誤信息在當前頁上：按照以下步驟實現(xiàn)：1. 在頁面上創(chuàng)建一個頁面元素用于顯示錯誤信息：為錯誤信息創(chuàng)建一個DIV，并且以 formname _errorloc格式命名，formname是頁面中的表單名，例如：2. 啟用頁面顯示調用EnableOnPageErrorDisplaySingleBox()方法啟用頁面顯示錯誤提示功能，如：frmvalidator.EnableOnPageErrorDisplaySingleBox();frmvalidator.EnableMsgsTogether();提示信息顯示在每個控件上方實現(xiàn)步驟：1. 為每個控件創(chuàng)建一個錯誤顯示區(qū)。例如定義一個div作為錯誤信息顯示元素，定義該div的ID格式必須為：Form表單名_輸入控件名_errorloc例如：2. 調用EnableOnPageErrorDisplay()方法例如：frmvalidator.EnableOnPageErrorDisplay();frmvalidator.EnableMsgsTogether();“條件”驗證器有時可能只在特定條件下執(zhí)行必要的驗證器。例如一個“其他”輸入框，在選擇“其他”單選項時需要必填：接下來就說明一下條件驗證器如何開發(fā)：在addValidation()方法中第四個參數(shù)是可選的。如果你傳遞一個條件，該條件被選中時，驗證才生效。例如：VWZ_IsChecked()是一個包含在gen_validatorv4.js中的一個方便的工具方法，可方便檢測單選框或復選框的選中狀態(tài)，第一個參數(shù)是輸入對象，第二個參數(shù)是值。如果是下拉框你可以使用VWZ_IsListItemSelected()方法：VWZ