这两天我们使用基于prototype的validation.js表单验证,官方网站的例子是用div,可是我们用的是table,看了很长时间都不知道怎么弄,最后经过不断试验,和查看资料,得出了一下结论,如果使用table的<tr><td>做表单,在页面上除了引入prototype.js,validation.js等,还需要写下如下代码:
<script type="text/javascript">
window.onload = function(){
var validator = new Validation('frmRegister', {stopOnFirst:true, immediate:true});
}
</script>
frmRegister为form的id值。
使用时,只需在输入框加入class=" *** " 这里的*为你所用调用的js,例如class="required min-length-4 max-length-10;" ,除此还遇到了一个问题,就是如何验证下拉列表不为空,这个好像validation.js中没有,最后我才知道,是要自己写,将自己定义的js这样写:
['validate-select', '请输选择下拉列表', function(v) {
return Validation.get('IsEmpty').test(v) || /[^0]/.test(v);
}],
通过正则表达式使值不能等于"0"实现。
最后说一下,validation.js中的内容:
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来验证输入域
这些属性都可以定义在表单验证输入框的class中。
分享到:
相关推荐
`validation.js`是一个专门用于前端表单验证的库,它基于Prototype JavaScript框架构建,提供了一种简单且灵活的方式来实现这一功能。 **Prototype框架** 是一个广泛使用的JavaScript库,它扩展了JavaScript语言的...
一款基于Prototype的Validation表单验证插件,实现Ajax风格的无刷新表单验证功能,当用户输入完表单,即时显示该项输入是否正确,不正确则会给出提示,适合那些比较喜欢简洁风格,又要求功能准确的用户,本款表单...
ajax以支持ajax验证 增加validate-pattern直接通过正则表达式的认证 修改validate-equlas以验证密码与确认密码的问题 增加less-than与great-than的验证以支持开始日期与结束日期相比较的问题 增加validation之间...
简洁,快速的验证语法 无需编写验证提示信息(当然也支持自定义提示信息) 错误消息在指定地方显示 支持组合验证 Ajax支持 基于prototype.js 支持国际化 易于扩展 基于标准的Html属性...
"Really easy field validation with Prototype 1.5.3 中文扩展版"是一个针对Prototype JavaScript库的前端验证插件,旨在简化网页表单的数据验证过程。这个工具以其简单易用和强大的功能著称,并且提供了对多语言的...
它有standalone version 和基于prototype的prototype.js version两个版本,可能是作者喜欢用prototype吧,呵呵。 livevalidation 官方网站(英文):http://livevalidation.com/examples LiveValidation 官方文档...
4. `prototype.js` 和 `effects.js`:这些文件可能来自Prototype JavaScript库,一个早期流行的JavaScript框架,用于增强DOM操作和创建动画效果。此框架可能依赖Prototype库来实现某些功能。 5. `validation_...
内容索引:脚本资源,Ajax/JavaScript,表单验证类,ProtoType,Validation Validation Ajax表单验证类,基于prototype.js,大家在很多大型网站都能见到这种表单验证的效果,使用的人非常多,调用很简单,压缩包内附有...
Scriptaculous是一款基于Prototype JavaScript框架的动态效果库,它为Web开发者提供了丰富的动画和用户交互功能。"scriptaculous-js-1.9.0"是这个库的一个特定版本,旨在提供稳定性和兼容性,以满足不同项目的需求。...
SWFUpload不同于其他基于Flash构建的上传工具,它有着优雅的代码设计,开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观;它还提供了一组简明的JavaScript事件,借助它们开发者可以方便的...
这在实际开发环境中显得尤为关键,因为许多网站和应用已经基于这些JavaScript库构建,而Rapid_Validation_1.5.1的兼容性使得它能轻松融入这些项目。 在功能方面,Rapid_Validation_1.5.1提供了丰富的验证规则。这些...
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"> ``` 如果使用的是本地项目,可以通过以下命令进行安装: ```bash npm install --save jquery-validation ``` ...
7. JSValidate - 基于Prototype和Scriptaculous的验证框架,提供简洁的API进行表单验证,但目前仍处于测试阶段。 8. Field validation with Prototype - 结合Prototype和Scriptaculous,提供了丰富的内置验证规则和...
`ValidationJS-开源`是一个基于PrototypeJS框架的轻量级客户端JavaScript验证库,旨在简化网页表单的验证过程,提供易用且可读性高的验证功能。以下将详细阐述其核心概念、工作原理以及如何使用。 一、核心概念 1. ...
10. **Ajax支持**:Struts 2可以与jQuery、Prototype等JavaScript库结合,实现部分页面刷新,提高用户体验。 综上所述,`struts-2.3.15.3.jar`是Struts 2框架的重要组成部分,包含了执行Struts 2应用程序所需的核心...
基于Object.prototype.toString而不是typeof严格类型验证,以避免意外行为 小巧轻便 极度模块化 简洁的API :man_dancing:安装 您可以使用NPM进行安装: npm install deep-waters Deep Waters将其模块导出为...
1. **jQuery插件的原理**:jQuery插件是基于jQuery核心功能扩展的功能模块,通过$.fn.extend()方法,将新方法添加到jQuery对象的prototype上,使得所有jQuery选择器都能调用这些新方法。 2. **DOM操作**:jQuery...
这在需要结合其他JavaScript库(如Prototype、YUI等)时非常有用。 总结,"jQuery实战"教程会带你逐步了解和掌握jQuery的基本用法和高级技巧,包括选择器的运用、DOM操作、事件处理、动画制作、Ajax请求以及插件的...