原作网址:http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype
扩展:badqiu (badqiu@gmail.com)
使用说明整理:Ivan Li (http://ivanl.iteye.com)
1:引用js文件
js 代码
- <script>"prototype.js" type="text/javascript"></script>
- <script>"validation.js" type="text/javascript"></script>
prototype.js是所有的基础
validation.js真正的验证框架文件,badqiu在原来的基础上增加了许多不错的功能.
2:引用css文件
可以参加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.
3:hellow world
在badqiu的扩展中如果要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定
所有要验证的域.
xml 代码
-
- <form id='helloworld' action="#" class='required-validate'>
- helloworld:<!---->br>
-
- <textarea name='content' class='required min-length-2'><!---->textarea><!---->br>
- <input type='submit' value='Submit'/>
- <input type='reset' value='Reset'/>
- <!---->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:添加自己的测试函数
js 代码
- Validation.add('class-name', 'Error message text', function(value [, element]) {
- return
- });
或者这样
js 代码
- 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);
- }]
- ]);
|
相关推荐
- **MVC模式实现:** Struts是一个基于MVC(Model-View-Controller)模式的Web应用框架,其中Controller部分主要由一个Servlet来实现,即ActionServlet。 - **ActionServlet与配置文件:** ActionServlet在接收到...
### Spring注解使用详解 #### 引言 随着软件开发技术的发展,框架的引入极大地提升了开发效率和代码的可维护性。Spring作为Java领域最受欢迎的企业级应用开发框架之一,其强大的功能之一便是对注解的支持。注解在...
- 如果需要每个请求创建一个新的实例,可以使用`@Scope("prototype")`。 **问题十一:SpringMVC常用的注解有哪些?** - **@Controller**:标记为控制器类。 - **@RequestMapping**:映射URL。 - **@ModelAttribute...
4.11.2 使用基于Java类的配置信息启动Spring容器 4.12 不同配置方式比较 4.13 小结 第5章 Spring容器高级主题 5.1 Spring容器技术内幕 5.1.1 内部工作机制 5.1.2 BeanDefinition 5.1.3 InstantiationStrategy 5.1.4 ...
4.11.2 使用基于Java类的配置信息启动Spring容器 4.12 不同配置方式比较 4.13 小结 第5章 Spring容器高级主题 5.1 Spring容器技术内幕 5.1.1 内部工作机制 5.1.2 BeanDefinition 5.1.3 InstantiationStrategy 5.1.4 ...
jQuery 是继 Prototype 之后的又一个杰出的 JavaScript 框架,由 John Resig 在 2006 年初创建。它以其简洁、高效、灵活著称,极大地简化了 JavaScript 和 AJAX 的编程工作。相比 Prototype,有人将 jQuery 比作 ...
Struts2是基于MVC设计模式的Web应用框架,其注解机制主要用于简化配置和增强功能。 #### 2.1 Struts2注解说明 Struts2的注解支持是通过拦截器(Interceptor)实现的,与Spring不同,它主要集中在Action的定义和...