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);
}]
]);
分享到:
相关推荐
Web 客户端概念原型验证的基础框架 项目开发 您需要在您的机器上安装 ,并在路径中工作 需要安装项目的依赖——项目根目录下的npm install 要启动项目,打开你的 shell 到项目的根文件夹,然后运行: ./run_dev_...
Zoop由很多组件和项目集合而成,其中包括smarty和prototype AJAX框架,PEAR模块等。高效的核心组件提供了很多你原本需要自己编码来实现的功能。Zoop内置的纠错功能可以通过配置实现生产环境下的错误日志生成,这个...
Linux常用命令全集,linux入门文档,MySQL中文参考手册,PHP_MySQL教程,PHP的一些例程,PHP的一些例程,prototype,Spring+in+Action中文版,SQL Server精华 (CHM),Struts快速学习指南,Validato表单验证,WINDOWS脚本技术,...
Sirius是用于客户端的现代Coffeescript MVC / MVVM框架。浏览器支持:IE9 +,FF,Opera,Chrome产品特点免费模板-您可以使用任何模板引擎,也可以根本不使用任何模板引擎MVC风格MVVM绑定(从视图到视图,从模型到...
书中不仅详细讲述了如何结合使用各种标准web技术如javascript、html、css和xmlhttprequest开发ajax应用,而且涵盖了调试、测试、文档、验证等工具,以及相关的模式、框架、应该避免的陷阱。阅读本书,再加上已有的...
示例描述:介绍Prototype框架。 21.1.html 使用Prototype的$()方法获取指定元素。 21.2.html 使用Prototype的$A()方法获取数组。 21.3.js 使用Prototype的Try.these()创建XML DOM。 21.4....
响应式应用用于全屏 Web 应用程序的轻量级响应框架。 内置 HTML、CSS3 和 javascript。 支持所有现代浏览器、IE 9+、iOS。 IE8 中的功能。去做 验证 IE 和移动支持 添加构建脚本 添加示例这个怎么运作响应式应用程序...
技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个...C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, C#]...
验证框架 11.1.简介 11.2.用法示例 11.3.验证对象组 11.4.验证对象 11.4.1.条件验证对象 11.4.2.必需性验证对象 11.4.3.正则表达式验证对象 11.4.4.通用验证对象 11.4.5.条件型验证 11.5.验证行为 11.5.1.错误消息...
以此为主要重点,我将遵循此设计并通过基于Prototype的对象检测和计数进行验证。 原型用例称为“在家中了解对象” :house: 它基本上是一个移动应用程序,可以使用图像捕获和计数您家中的不同对象,并提供其价值的...
编程在不断的简化,可是“用户体验、性能、兼容性、可扩展……”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。 越来越多的人开始深入研究和使用...
Spring3.0引入了众多Java开发者翘首以盼的新功能和新特性,如OXM、校验及格式化框架、REST风格的Web编程模型等。这些新功能实用性强、易用性高,可大幅降低Java应用,特别是JavaWeb应用开发的难度,同时有效提升...
Spring3.0引入了众多Java开发者翘首以盼的新功能和新特性,如OXM、校验及格式化框架、REST风格的Web编程模型等。这些新功能实用性强、易用性高,可大幅降低Java应用,特别是JavaWeb应用开发的难度,同时有效提升...
### Technical该项目将FeathersJS用于后端框架,该框架将Express用于Node.js Web框架,将Passport用于身份验证,将Bcrypt用于对密码进行哈希处理。 数据使用Mongoose存储在MongoDB内部。 前端是使用HTML,Less,...
第一个月主要是搭建web框架,构建和自动测试的框架,目前Gulp的构建和测试任务已可用。 下一阶段: 从前到后实现一到两个模块的RESTful,比如books实现从界面到入库的示例代码 预期阶段: 加入socket.io即时交互 ...
jQuery是继Prototype之后的又一个优秀JavaScript框架,深受全球开发者欢迎,已经成为Web开发领域的事实标准。jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,...
103、Struts的validate框架是如何验证的? 24 104、说下Struts的设计模式 24 105、spring工作机制及为什么要用? 24 106、HttpSession session = request.getSession() 24 107、getParameter与 getAttribute的区别? ...
103、Struts的validate框架是如何验证的? 24 104、说下Struts的设计模式 24 105、spring工作机制及为什么要用? 24 106、HttpSession session = request.getSession() 24 107、getParameter与 getAttribute的区别? ...