基于prototype的web验证框架


prototype.js是所有的基础

  validation.js真正的验证框架文件,badqiu在原来的基础上增加了许多不错的功能

  1:引用js文件

<script>"prototype.js"
type="text/javascript">
</script> 
<script>"validation.js"
type="text/javascript">
</script>

  2:引用css文件

  可以参加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.

  3:hellow world

  在badqiu的扩展中如果要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定

  所有要验证的域.  

  xml 代码

<!-- 为form增加required-validate class,标识需要验证form --> 
  <form id='helloworld' action="#" class='required-validate'> 
    helloworld:<!--</span-->br> 
    <!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 --> 
    <textarea name='content' class='required min-length-2'><!--</span-->textarea><!--</span-->br> 
    <input type='submit' value='Submit'/> 
    <input type='reset' value='Reset'/> 
<!--</span-->form> 

  在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-2'表示这是一个非空,并且最小长度是2的域,
在编辑域失去焦点时,会自动检查,如果输入不满足上述条件,则产生错误提示.

  4:检查规则说明

  required -- 非空域

  validate-number -- 一个有效数

  validate-digits -- 只能包含[0-9]任意个数字

  validate-alpha -- 只能是字母[a-zA-Z]

  validate-alphanum -- 只能是字母和数字的组合

  validate-date -- 只能是日期

  validate-email -- 只能是有效的email

  validate-url -- 只能是有效的url地址

  validate-date-au -- 日期的形式必须是dd/mm/yyyy

  validate-one-required -- 至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中

  validate-date-cn -- 日期的形式必须是yyyy/mm/dd

  validate-integer -- 只能是整数,可以有正负号

  validate-chinese -- 只能是中文

  validate-ip -- 有效的IP地址

  validate-phone -- 有效的电话(仅适用于中国)

  validate-mobile-phone -- 有效的手机号,在badqiu的版本中只验证了135的,有待改进

  validate-equals-$otherInputId -- 必须和某个input field相等例如 validate-equals-otherInputId(此处$some表示一个特定的值)

  less-than-$otherInputId -- 小于某个input field less-than-otherInputId(此处$some表示一个特定的值)

  great-than-$otherInputId -- 大于某个input field less-than-otherInputId(此处$some表示一个特定的值)

  min-length-$number -- 最小长度是$number(此处$some表示一个特定的值)

  max-length-$number -- 最大长度是$number(此处$some表示一个特定的值)

  validate-file-$type1-$type2-$typeX -- file的input必须是声明的$type1 -- $typeX中的一种
validate-float-range-$minValue-$maxValue -- 必须是$minValue到$maxValue的一个浮点数

  validate-int-range-$minValue-$maxValue -- 必须是$minValue到$maxValue的一个整数

  validate-length-range-$minLength-$maxLength -- 输入字符串的长度必须在$minLength到$maxLength之间

  max-value-$number -- 输入域的最大值是$number

  min-value-$number -- 输入域的最小值是$number

  validate-pattern-$patternAttributes -- 通过自定义pattern来验证输入域的正确性

  validate-ajax -- 通过ajax来验证输入域

  5:Validation的选项说明

  可以手工指定要验证那个form,在指定是可以给定一些选项

  js 代码

<script>"text/javascript"> 
  var valid = new Validation('form-id', {onSubmit:false}); 
  var result = valid.validate(); 
</script>

  创建Valuedation是的参数说明

  onSubmit -- 是否绑定onSubmit函数, default - true

  stopOnFirst -- 是否在检查到第一个错误时就停止检查 default- false

  immediate -- 是否在被检测域失去焦点时就检查被检查域 default - false

  focusOnError -- 是否把焦点移动到发生错误的域上 default - true

  useTitles -- 是否使用提示 default - false

  onFormValidate:当form被检测和的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-form本身的id

  onElementValidate:当没个element被检查后的回调函数,有两个输入参数 arg[0]-检测form的结果true or false, arg[1]-element本身的id


  6:添加自己的测试函数

Validation.add('class-name', 'Error message text', function(value [, element]) { 
  return /* do validation here */ 
});

  或者这样

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); 
  }] 
]);

本文作者:



相关阅读:
用PHP生成PDF文件 with FPDF
Web服务器控件:LinkButton控件
ASP简单入门教程(5):ASP子程序
php zend 相对路径问题
windows下mysql忘记root密码的解决方法
mysql 读写分离(实战篇)
HTML5的结构和语义(5):内嵌媒体
Windows 2003安装后的相关设置
MySQL 创建索引(Create Index)的方法和语法结构及例子
Vista和Windows 7任务栏的像素尺寸
PHP中,文件上传
在作缓存时使用SqlCacheDependency
javascript: 改变和控制显示的图片大小
Win7解决播放影音文件双语并行问题
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4