简介 基本的方式是在表单发生onsubmit事件的时候,遍历表单所有元素的class属性而执行需要验证。如果验证失败,则显示验证建议并阻止表单提交。 DEMO:http://tetlaw.id.au/upload/dev/validation/valid.html 下载:http://tetlaw.id.au/upload/dev/validation/validation1.5.3.zip 首先嵌入javascript库,一般写入header里面(注意写代码的时候把全角的<>换成半角的): <script src="prototype.js" type="text/javascript"></script> <script src=”validation.js” type=”text/javascript”></script> 然后像下面一样写表单元素,在class属性中写入需要的验证:<input class="required validate-number" id="field1" name="field1" /> 最后通过如下的方式通过form对象或者form的id来激活验证 <script type="text/javascript"> new Validation('form-id'); // OR new Validation(document.forms[0]); </script> 它里面内置了大量的检验,但是也有包含自己定制检验代码的扩展。 验证时也避免了验证通过css属性设置display:none的区域或者元素的子元素。这种方式可以保证只能得到在form中是可见的且class的属性值为required的区域。 选项 下面是一个加入验证元素的可用的类清单: 1. required (非空白) 2. validate-number (合法的数:比如33,3.3) 3. validate-digits (仅是数字) 4. validate-alpha (仅是字母) 5. validate-alphanum (仅是数字和字母) 6. validate-date (合法的时间) 7. validate-email (合法的Email地址) 8. validate-url (合法的URL) 9. validate-date-au (日期规则; dd/mm/yyyy) 10. validate-currency-dollar (合法的美元值) 11. validate-one-required (至少一个多选/单选项被选择 - 见后*) *为了使用validate-one-required验证符,你必须把该类名只放入到一个checkbox/rediao按钮(最后一个可能是最合适)且所有的input元素应该处于一个父元素之下,比如div元素。这种方式下验证库能够找到所有的checkbox/rediao按钮且放置验证提示在父元素的底部从而使其出现在一组checkbox/radiao按钮的后面。 当验证初始化时,可以通过可选项{stopOnFirst:ture}来实现停止在第一个验证失败的行为。Demo的例子都是默认的。如果设置了,提交表单时第一个验证失败的提示马上就显示了。 <script type="text/javascript"> new Validation('form-id',{stopOnFirst:true}); </script> 也可以通过可选项{immediate:true}来实现离开一个验证区域时立即进行验证。这发生在表单所有元素的onblur事件上。 在默认情况下验证库给表单的onsubmit事件增加了一个监听器,当验证失败的时候阻止这个事件的进行。如果设置可选项{onSubmit:false},它就不会阻止了。通过这种方式,可以手动的调用自己的javascrip验证函数。 在默认情况下验证库使出现错误的第一个验证域获取焦点。可以通过可选项{focusOnError:false}使它不这样做。 也可以通过可选项{useTitles:true}来使验证器使用表单元素的title属性作为验证错误的提示信息。 通过可选项{onFormValidate:yourFunction;onElementValidate:yourFunction}来设置回调函数。 onFormValidate在表单验证执行之后被调用,获取两个参数:验证结果(true或者false)和表单的符号。onElementValidate在每个表单元素验证之后被调用,也获取两个参数:验证结果(true或者falsh)和表单元素符号。 可以创建自己的页面验证通知元素来替代验证器的错误信息。当脚本创建提示元素,它首先寻找匹配‘advice-’+validate-class- name+‘-’+element.id的元素,如果找不到则寻找匹配’advice-’+element.id的元素。如果表单元素没有id属性将匹配 name属性。如果它找到元素将使他显示。例如在Demo中看Donation这个域。你制作一个普通的验证通知元素,使它的样式为 display : none。 如果也在也面的头部嵌入来自Scriptaculous的文件effect.js,就可以控制验证通知的显示的渐隐渐显效果。<script src="effects.js" type="text/javascript"></script> CSS Hooks 和上面的验证CSS类一样,验证库用CSS类来指明验证的状态:validation-failed和validation-passed。 这个验证通知元素有一个validation-advice的类,id属性匹配下面这个规则:‘advice-’+validation-class-name+‘-’element.id 所以如果域birthdate用validation-date验证类,则验证通知元素的id为advice-validation-date-birthday。 Javascript API 默认下Javascript类把一个事件观察器绑定到表单的onsubmit事件。如果你喜欢通过自己的javascript提交表单,你依旧可以像下面这样检验表单: <script type="text/javascript"> var valid = new Validation('form-id', {onSubmit:false}); var result = valid.validate(); </script> 实力方法validate()将返回true或者false。 这个Javascript类有一个实例函数可以reset所有的验证域: <script type="text/javascript"> var valid = new Validation('form-id'); valid.reset(); </script> 注意这不是reset整个表单而是所有的验证域。 validation类也有一些可以用来独立使用的静态方法:Validation.validate([element OR element id] [, options]) 这用所有当前的验证类验证域(或id指的域)。也可以通过可选项{useTitle:true}使域验证器使用元素的标题属性值来作为错误通知信息。 可以通过下面的方式运行一个特殊的验证一个域或者域值。Validation.get('validator-name').test(value [, element]) 可以像这样来增加自己的验证器: Validation.add('class-name', 'Error message text', function(value [, element]) { return /* do validation here */ }); 例如这事一个内置的验证器: Validation.add('validate-alpha', 'Please use letters only (a-z) in this field.', function (v) { return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v) }); 当增加一个新的验证器时,它被通过以CSS类名为关键字加入到一个静态的验证方法组中。必须通过表单元素的class属性来应用自己定制的验证函数. 可以使用Validation.addAllThese() 按照如下的方式比较容易的添加多个验证函数: Validation.addAllThese([ ['required', 'This is a required field.', function(v) { return !Validation.get('IsEmpty').test(v); }], ['validate-number', 'Please use numbers only in this field.', function(v) { return Validation.get('IsEmpty').test(v) || !isNaN(v); }], ['validate-digits', 'Please use numbers only in this field.', function(v) { return Validation.get('IsEmpty').test(v) || !/[^\d]/.test(v); }] ]); 这是通过一个每个元素是有三个元素[className, error, function]的数组的数组。 ajaxcn.org上有一个应用的例子,可以看看http://ajaxcn.org/space/start/2006-05-22/1
基于prototype的易用表单验证(轉)
最新推荐文章于 2017-04-10 17:23:37 发布