JavaScriptFormValidation验证框架使用手册

JavaScriptFormValidation验证框架使用手册译刘海刚使用客户端JS效验用户在网页表单的输入是一种很不错的方式，但当表单中的字段繁多时，这种效验工作也随之复杂。该效验框架使之变得更加简单。本手册主要讲解内容：下载Javascript表单验证脚本文件。表单验证脚本的使用。如何增加一个自定义验证器。各个验证器的描述。“条件”验证器。自定义代码触发提交。获取JavaScriptFormValidation首先，到以下网址下载最新的验证框架文件：或者使用javascript_form.rar下载后的zip文件中包含了验证框架js脚本文件和使用范例。脚本中内置了几乎所有常见的验证类型。验证框架的主要思想是为需要验证的表单中的所有表单控件定义“验证描述符”集。“验证描述符”无非是个字符串而已，表示每个表单控件元素使用哪种验证，表单控件可以拥有0到多个验证器，例如：你可以要求输入控件不得为空，且必须在25个字符内，且为数字。换句话说，就是你可以为输入框设定多个“验证描述符”。表单验证脚本的使用1.在需要验证的HTML页，HEAD结束标签前添加gen_validatorv4.js（gen_validatorv4.js在下载后的zip文件中，解压即可）：2.紧接着在你需要验证的表单后面，通过表单的名字或ID创建Validator()对象：3.现在增加“必填”验证器addValidation()的方法格式：frmvalidator.addValidation(字段名,验证器描述符,验证失败信息);验证失败信息是可选的，如果不给定则使用框架默认失败信息。你可以继续添加一个数字的校验器：示例下面是一个完整的示例：formaction=id=myformplabelfor='FirstName'FirstName:/labelinputtype=textid=FirstNamename=FirstName//pplabelfor='LastName'LastName:/labelinputtype=textid=LastNamename=LastName//pplabelfor='EMail'EMail:/labelinputtype=textid=EMailname=EMail//pplabelfor='Phone'Phone:/labelinputtype=textid=Phonename=Phone//pplabelfor='Address'Address:/labeltextareacols=20rows=5id=Addressname=Address/textarea/pplabelfor='Country'Country:/labelselectid=Countryname=Countryoptionvalue=000selected=selected[chooseyours]/optionoptionvalue=008Albania/optionoptionvalue=012Algeria/optionoptionvalue=016AmericanSamoa/optionoptionvalue=020Andorra/optionoptionvalue=024Angola/optionoptionvalue=660Anguilla/optionoptionvalue=010Antarctica/optionoptionvalue=028AntiguaAndBarbuda/optionoptionvalue=032Argentina/optionoptionvalue=051Armenia/optionoptionvalue=533Aruba/option/select/ppinputtype=submitname=submitvalue=Submit/p/formscripttype=text/javascriptvarfrmvalidator=newValidator(myform);frmvalidator.addValidation(FirstName,req,PleaseenteryourFirstName);frmvalidator.addValidation(FirstName,maxlen=20,MaxlengthforFirstNameis20);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);/script其他一些注意事项：表单验证器必须创建在HTML表单后（即在/form标签后）你的表单必须有唯一的一个名称，如果在同一个页面中有多个form对象，则需要添加多个验证器为每一个表单做验证。验证器之间不会冲突。如果你使用这个验证框架，则不能使用onsubmit事件，因为验证器脚本会自动覆盖onsubmit事件。如果你想添加一个自定义的验证器，请参考下面的章节。添加一个自定义验证器如果你不想使用内置的验证描述符，想添加一个自定义的验证器，你可以这样做，参考下面的步骤：1.创建一个返回ture或false的js方法：sfm_show_error_msg()方法用你选择的风格显示错误信息。2.用验证器对象关联验证方法：自定义验证方法会在其他验证器之后自动执行。如果你想要做更多的验证，则把需要验证的方法写在同一个方法中：其中DoMyValidationOne()和DoMyValidationTwo()方法都是自定义的验证方法清除验证器有时根据页面要求可能会在运行时动态的更改验证器的必要性，为这种情况考虑，有种方法可以清除验证器对象中所有的验证器：设置验证失败时的焦点获取默认情况下，当有验证失败发生时，焦点会自动被设置到验证失败的输入控件上，你可以禁用这种行为：验证描述符介绍验证描述符用法requiredreq字段不得为空。注意：验证的控件为输入框和TextArea多行文本框.对于像下拉菜单和单选按钮组的“选择”，请使用适当的验证，如“dontselect'或'selone_radio”的。maxlen=???maxlength=???限制输入框的字符长度。例如，如果允许输入的长度最大为25个字符，则设置验证描述符为“maxlen=25”minlen=???minlength=???检查输入的字符最小长度，例如“minlen=5”alphanumericalnum限定输入框仅允许输入字母和数字。注意，空格和标点符号也不允许，因为这些不是字母或数字alphanumeric_spacealnum_s限定输入框仅允许输入字母、数字和空格numnumeric仅允许数字alphaalphabetic仅允许字母alpha_salphabetic_space仅允许字母和空格email验证字段是否为合法的邮件地址格式。（注意，这并不验证邮件地址是否存在）lt=???lessthan=???验证数据是否小于指定值，该字段必须为数字类型字段。例如一个值只能小于1000，则设置验证描述符为“lt=1000”gt=???验证数据是否大于指定值，该字段必须为数字类型字段。greaterthan=???例如一个值只能大于10，则设置验证描述符为“gt=10”regexp=???验证输入是否匹配一个正则表达式。例如：“regexp=^[A-Za-z]{1,20}$”表示允许输入1-20个字母。dontselect=??该验证描述符仅用于下拉框。下拉选项通常使用一个选项类似“-请选择-”（该选项通常也被成为默认选中的），用户需要选择一个“-请选择-”之外的其他选项。如果这个默认选项的value为“000”，则验证描述符应该被设置为“dontselect=000”dontselectchk=??该验证描述符仅用于复选框。用户不能选择该复选框。用复选框的值代替“??”。例如：dontselectchk=onshouldselchk=??该验证描述符仅用于复选框。用户需选择该复选框。用复选框的值代替“??”。例如：shouldselchk=onselone_radio验证是否选中了单选框的某一项。例如：比较两个输入控件eqelmnt=???比较两个输入框的值是否相等。例如，密码和确认密码。用另一个控件的名字替换“???”。例如：neelmnt=???判断两个输入框的值是否不等。例如：ltelmnt=???判断输入框的值是否小于另一个输入框的值。用另一个控件的名字替换“???”。leelmnt=???判断输入框的值是否小于或等于另一个输入框的值。用另一个控件的名字替换“???”。gtelmnt=???判断输入框的值是否大于另一个输入框的值。用另一个控件的名字替换“???”。geelmnt=???判断输入框的值是否大于或等于另一个输入框的值。用另一个控件的名字替换“???”。其他对于验证描述符，从最新版的示例中看出，上述官方的表格列出的并不全：对于复选框：selmin=???：复选框最少选择的数量。selmax=???：复选框最多选择的数量。对于file框：file_extn=???：限定文件的扩展名。例如：file_extn=jpg;gif;png。req_file：文件上传必填。验证信息的显示方式如果不做任何编码，则当验证框架检测到一个验证失败的信息就会提示，而非等到全部验证之后再提示所有不符合验证规则的输入项。可用下面代码开启全部验证后提示的功能：frmvalidator.EnableMsgsTogether();采用弹出框的形式提示默认采用弹出框的形式提示。例如：提示信息显示在页面上你可以显示错误信息在当前页上：按照以下步骤实现：1.在页面上创建一个页面元素用于显示错误信息：为错误信息创建一个DIV，并且以{formname}_errorloc格式命名，{formname}是页面中的表单名，例如：2.启用页面显示调用EnableOnPageErrorDisplaySingleBox()方法启用页面显示错误提示功能，如：frmvalidator.EnableOnPageErrorDisplaySingleBox();frmvalidator.EnableMsgsTogether();提示信息显示在每个控件上方实现步骤：1.为每个控件创建一个错误显示区。例如定义一个div作为错误信息显示元素，定义该div的ID格式必须为：{Form表单名}_{输入控件名}_errorloc例如：2.调用EnableOnPageErrorDisplay()方法例如：frmvalidator.EnableOnPageErrorDisplay();frmvalidator.EnableMsgsTogether();“条件