JavaScript Validation驗(yàn)證框架使用手冊(cè).docx

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