JavaScriptFormValidation验证框架使用手册

《JavaScriptFormValidation验证框架使用手册》由会员分享，可在线阅读，更多相关《JavaScriptFormValidation验证框架使用手册（9页珍藏版）》请在装配图网上搜索。

1、JavaScript Form Validation验证框架使用手册译 刘海刚使用客户端JS效验用户在网页表单的输入是一种很不错的方式，但当表单中的字段繁多时，这种效验工作也随之复杂。该效验框架使之变得更加简单。本手册主要讲解内容：l 下载Javascript表单验证脚本文件。l 表单验证脚本的使用。l 如何增加一个自定义验证器。l 各个验证器的描述。l “条件”验证器。l 自定义代码触发提交。获取JavaScript Form Validation首先，到以下网址下载最新的验证框架文件：或者使用下载后的zip文件中包含了验证框架js脚本文件和使用范例。脚本中内置了几乎所有常见的验证类型。验证

2、框架的主要思想是为需要验证的表单中的所有表单控件定义“验证描述符”集。“验证描述符”无非是个字符串而已，表示每个表单控件元素使用哪种验证，表单控件可以拥有0到多个验证器，例如：你可以要求输入控件不得为空，且必须在25个字符内，且为数字。换句话说，就是你可以为输入框设定多个“验证描述符”。表单验证脚本的使用1. 在需要验证的HTML页，结束标签前添加gen_validatorv4.js（gen_validatorv4.js在下载后的zip文件中，解压即可）：2. 紧接着在你需要验证的表单后面，通过表单的名字或ID创建Validator()对象：3. 现在增加“必填”验证器addValidatio

3、n()的方法格式：frmvalidator.addValidation(字段名, 验证器描述符, 验证失败信息);验证失败信息是可选的，如果不给定则使用框架默认失败信息。你可以继续添加一个数字的校验器：示例下面是一个完整的示例：First Name:Last Name:EMail:Phone:Address:Country:choose yoursAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua And BarbudaArgentinaArmeniaArubavar frmvalidator = new Val

4、idator(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);frm

5、validator.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 表单验证器必须创建在HTML表单后（即在标签后）l 你的表单必

6、须有唯一的一个名称，如果在同一个页面中有多个form对象，则需要添加多个验证器为每一个表单做验证。验证器之间不会冲突。l 如果你使用这个验证框架，则不能使用onsubmit事件，因为验证器脚本会自动覆盖onsubmit事件。如果你想添加一个自定义的验证器，请参考下面的章节。添加一个自定义验证器如果你不想使用内置的验证描述符，想添加一个自定义的验证器，你可以这样做，参考下面的步骤：1. 创建一个返回ture或false的js方法：sfm_show_error_msg()方法用你选择的风格显示错误信息。2. 用验证器对象关联验证方法：自定义验证方法会在其他验证器之后自动执行。如果你想要做更多的验证

7、，则把需要验证的方法写在同一个方法中：其中DoMyValidationOne() 和 DoMyValidationTwo()方法都是自定义的验证方法清除验证器有时根据页面要求可能会在运行时动态的更改验证器的必要性，为这种情况考虑，有种方法可以清除验证器对象中所有的验证器：设置验证失败时的焦点获取默认情况下，当有验证失败发生时，焦点会自动被设置到验证失败的输入控件上，你可以禁用这种行为：验证描述符介绍验证描述符用法required req字段不得为空。注意：验证的控件为输入框和TextArea多行文本框.对于像下拉菜单和单选按钮组的“选择”，请使用适当的验证，如“dontselect或selon

8、e_radio”的。maxlen=?maxlength=?限制输入框的字符长度。例如，如果允许输入的长度最大为25个字符，则设置验证描述符为“maxlen=25”minlen=?minlength=?检查输入的字符最小长度，例如“minlen=5”alphanumericalnum限定输入框仅允许输入字母和数字。注意，空格和标点符号也不允许，因为这些不是字母或数字alphanumeric_spacealnum_s限定输入框仅允许输入字母、数字和空格numnumeric仅允许数字alphaalphabetic仅允许字母alpha_salphabetic_space仅允许字母和空格email验证字

9、段是否为合法的邮件地址格式。（注意，这并不验证邮件地址是否存在）lt=?lessthan=?验证数据是否小于指定值，该字段必须为数字类型字段。例如一个值只能小于1000，则设置验证描述符为“lt=1000”gt=?greaterthan=?验证数据是否大于指定值，该字段必须为数字类型字段。例如一个值只能大于10，则设置验证描述符为“gt=10”regexp=?验证输入是否匹配一个正则表达式。例如：“regexp=A-Za-z1,20$”表示允许输入1-20个字母。dontselect=?该验证描述符仅用于下拉框。下拉选项通常使用一个选项类似“-请选择-”（该选项通常也被成为默认选中的），用户需

10、要选择一个“-请选择-”之外的其他选项。如果这个默认选项的value为“000”，则验证描述符应该被设置为“dontselect=000”dontselectchk=?该验证描述符仅用于复选框。用户不能选择该复选框。用复选框的值代替“?”。例如：dontselectchk=onshouldselchk=?该验证描述符仅用于复选框。用户需选择该复选框。用复选框的值代替“?”。例如：shouldselchk=onselone_radio验证是否选中了单选框的某一项。例如：比较两个输入控件eqelmnt=?比较两个输入框的值是否相等。例如，密码和确认密码。用另一个控件的名字替换“?”。例如：neel

11、mnt=?判断两个输入框的值是否不等。例如：ltelmnt=?判断输入框的值是否小于另一个输入框的值。用另一个控件的名字替换“?”。leelmnt=?判断输入框的值是否小于或等于另一个输入框的值。用另一个控件的名字替换“?”。gtelmnt=?判断输入框的值是否大于另一个输入框的值。用另一个控件的名字替换“?”。geelmnt=?判断输入框的值是否大于或等于另一个输入框的值。用另一个控件的名字替换“?”。其他对于验证描述符，从最新版的示例中看出，上述官方的表格列出的并不全：对于复选框：selmin=?：复选框最少选择的数量。selmax=?：复选框最多选择的数量。对于file框：file_ex

12、tn=?：限定文件的扩展名。例如：file_extn=jpg;gif;png。req_file：文件上传必填。验证信息的显示方式如果不做任何编码，则当验证框架检测到一个验证失败的信息就会提示，而非等到全部验证之后再提示所有不符合验证规则的输入项。可用下面代码开启全部验证后提示的功能：frmvalidator.EnableMsgsTogether();采用弹出框的形式提示默认采用弹出框的形式提示。例如：提示信息显示在页面上你可以显示错误信息在当前页上：按照以下步骤实现：1. 在页面上创建一个页面元素用于显示错误信息：为错误信息创建一个DIV，并且以 formname _errorloc格式命名，

13、formname是页面中的表单名，例如：2. 启用页面显示调用EnableOnPageErrorDisplaySingleBox()方法启用页面显示错误提示功能，如：frmvalidator.EnableOnPageErrorDisplaySingleBox();frmvalidator.EnableMsgsTogether();提示信息显示在每个控件上方实现步骤：1. 为每个控件创建一个错误显示区。例如定义一个div作为错误信息显示元素，定义该div的ID格式必须为：Form表单名_输入控件名_errorloc例如：2. 调用EnableOnPageErrorDisplay()方法例如：fr

14、mvalidator.EnableOnPageErrorDisplay();frmvalidator.EnableMsgsTogether();“条件”验证器有时可能只在特定条件下执行必要的验证器。例如一个“其他”输入框，在选择“其他”单选项时需要必填：接下来就说明一下条件验证器如何开发：在addValidation()方法中第四个参数是可选的。如果你传递一个条件，该条件被选中时，验证才生效。例如：VWZ_IsChecked()是一个包含在gen_validatorv4.js中的一个方便的工具方法，可方便检测单选框或复选框的选中状态，第一个参数是输入对象，第二个参数是值。如果是下拉框你可以使用VWZ_IsListItemSelected()方法：VWZ_IsListItemSelected(list_object, item_value)第一个参数是下拉框对象，第二个参数是值。自定义表单提交时触发验证器验证框架使用表单的onsubmit触发验证器，如果你使用代码来提交表单，比如点击一个超链，下面的代码不会触发onsubmit事件：你可以显示的调用表单的onsubmit方法来触发验证器，像以下代码：或让其变得整洁一些：译者建议：建议将验证JS代码编写在一个独立的js文件中，然后在表单下方进行引用。