主要特征
- 简洁的验证语法
- 快速
- 无需编写验证提示信息
- 支持组合验证
- Ajax支持
- 基于prototype.js
- 无侵入性
- 支持国际化
- 易于扩展
- 基于标准的Html属性(class)添加验证,易于其它标准的jsp taglib集成
支持浏览器
- IE 5.x 以上
- Mozilla 1.4 以上
- FireFox 0.9 以上
- Opera 8.5 测试通过
helloworld示例
引用文件
<script src="prototype.js" type="text/javascript"></script>
<script src="validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style_min.css"/>
- prototype.js是所有的基础
- validation_cn.js真正的验证框架文件
- 可以添加style_min.css中的样式声明,也可以把style_min.css中的样式声明引入到你的框架js文件中去.
表单验证
<form id='helloworld' action="#" class='required-validate'>
helloworld:</br>
<textarea name='content' class='required min-length-15'></textarea></br>
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</form>
- 要是某个form中的元素被验证可以这样给声明的form中加一个class='required-validate'的属性,框架会在load是自动绑定所有要验证的域.
- 在要检查的域中通过class属性来声明被检查域的限制条件,例如上面的class='required min-length-15'表示这是一个非空,并且最小长度是15的域,在编辑域失去焦点时,会自动检查,如果输入不满足上述条件,则产生错误提示.
验证效果
检查规则
验证表达式
描述
示例
required |
非空域,全部空格也算空 |
validate-number |
一个有效数 |
validate-digits |
只能包含[0-9]任意个数字 |
validate-alpha |
只能是字母[a-zA-Z] |
validate-alphanum |
只能是字母和数字的组合 |
validate-email |
只能是有效的email |
validate-url |
只能是有效的url地址 |
validate-one-required |
至少有一个被选中,例如一组checkbox, radiobutton,它们最好包含在一个div和span中 |
validate-integer |
只能是整数,可以有正负号 |
validate-ip |
有效的IP地址 |
min-length-$number |
最小长度是$number (此处$some表示一个特定的值) |
最小长度为8: min-length-8 |
max-length-$number |
最大长度是$number |
最大长度为8: max-length-8 |
max-value-$number |
输入域的最大值是$number |
最大值为8.1: max-value-8.1 |
min-value-$number |
输入域的最小值是$number |
最大值为-8.1: max-value--8.1 |
equals-$otherInputId |
必须和某个input field相等,用于密码两次输入验证 |
equals-password |
less-than-$otherInputId |
小于某个input field less-than-otherInputId,多用于结束日期不能小于开始日期的需求 |
great-than-$otherInputId |
大于某个input field less-than-otherInputId |
validate-date-$dateFormat |
只能是日期,$dateFormat为日期格式,$dateFormat的可选,默认格式为yyyy-MM-DD |
validate-date-yyyy年MM月dd日 |
validate-file-$type1-$type2-$typeX |
验证文件输入域选择的文件类型只能为声明的$type1 – $typeX中的一种 |
validate-file-png-jpeg |
float-range-$minValue-$maxValue |
必须是$minValue到$maxValue的一个浮点数 |
1至20: float-range-1-20 |
int-range-$minValue-$maxValue |
必须是$minValue到$maxValue的一个整数 |
length-range-$minLength-$maxLength |
输入字符串的长度必须在$minLength到$maxLength之间 |
validate-pattern-$RegExp |
通过自定义正则表达式$RegExp来验证输入域的正确性 |
vaidate-pattern-/a/gi |
validate-ajax-$url |
通过ajax来验证输入域,$url为ajax验证提交的地址,错误提示信息将由服务器端返回. 数据示例
<input name="username" value="badqiu"/>
,提交数据为:username=badqiu&what=username&value=badqiu what为input的name,value为input的value |
validate-ajax-http://localhost/valiate-email.jsp |
validate-chinese |
只能是中文(以下为中国的相关验证) |
validate-phone |
有效的电话 |
validate-mobile-phone |
有效的手机号 |
validate-id-number |
验证是否有效的身份证号码 |
validate-zip |
验证邮政编码 |
validate-qq |
验证QQ号码 |
编程式为表单增加验证(Validation选项)
- 可以手工指定要验证那个form,在指定是可以给定一些选项
<script type="text/javascript">
var valid = new Validation('form-id', {onSubmit:false});
// do something ...
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
添加自己的Validator测试函数
增加Validator
/*参数说明
* v: 为需要测试的值
* elm: 为html input
* args: 为有参数的验证表达式传递的参数,如min-length-10,则args[0]为10
* metadata: 为Validator本身
*/
Validation.add(['max-value',function(v,elm,args,metadata) {
return parseFloat(v) <= parseFloat(args[0]);
},{depends : ['validate-number']}],
});
/*
* 增加验证出错的提示信息
*/
Validator.messagesSourceCn = [
['max-value' , '最大值为%s'],
]
Validator的选项:
depends – 为validator的之间的内部依赖
ignoreEmptyValue – 表明validator是否忽略空值不进行测试
FAQs
- 我的网站现在使用的是UTF-8编码,怎么使用validation_cn.js显示中文会乱码?
答:validation_cn.js默认是使用GBK编码,使用可以改变文件编码的编辑器以UTF-8编码方式再保存,如保存为validation_cn_UTF-8.js
- 国际化怎么办?
答:动态修改Validator.messageSource即可
- 日期之间的比较怎么办,如结束日期要大于开始日期
答:先使用validate-date验证输入的值是合法的日期,再加上"less-than"的比较即可
- select的验证
答:将Please Select..的值使用一个空格填充即可
<select id="test" name="test" class="required">
<option value=" ">Please Select..</option>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
</select>
- 在IE中提示"Unterminated string constant"或是"末结束的字符串常量"错误
答: 是由于你网页的编码问题,validation_cn.js默认是GBK编码,请转换成与你的网页想适应的编码
附: EasyValidation3.0.zip
分享到:
相关推荐
标题“最简单的表单验证框架发布”提示我们讨论的主题是一个用于验证HTML表单的轻量级框架。在网页开发中,表单验证是确保用户输入数据有效性和安全性的关键步骤。这个框架可能简化了常见的验证规则,使得开发者可以...
这是目前国内开发的所有JS表单验证框架中最好的一个。理由如下:1、简单,只有一个JS文件,不需要其它相关JS支持。2集成AJAX验证支持。3、验证类型全面。4、极易扩展。 主要功能有: PISX通用表单验证具有以下一些...
它将常见的校验(目前支持13种)封装起来,并创造性的采用xml来存贮表单验证信息,使得表单的验证成为整个项目中最不重要的环节,开发者只需要定义几个xml标记,就可以创建出复杂的验证策略,而不用编写一行...
8. **验证库和框架**:在实际项目中,开发者可能会使用现成的验证库(如jQuery Validation Plugin)或前端框架(如React、Vue等)来简化表单验证的实现。然而,这个实例可能是为初学者设计的,因此可能更注重基础...
它将常见的校验(目前支持13种)封装起来,并创造性的采用xml来存贮表单验证信息,使得表单的验证成为整个项目中最不重要的环节,开发者只需要定义几个xml标记,就可以创建出复杂的验证策略,而不用编写一行...
根据给定文件的信息,我们可以总结出以下关于“最简单的验证表单的方法”的详细知识点: ### 一、背景介绍 在Web开发中,表单验证是非常重要的一环,它确保了用户提交的数据符合预期的格式与规则,从而避免了无效...
通过以上特性,talent validate 1.6.1 能够帮助开发者构建健壮且用户体验优良的表单验证系统。其在大型企业项目的实际应用,证明了其稳定性和可扩展性。无论是初创项目还是大型企业平台,都可以考虑使用talent ...
通过以上知识点,你可以创建一个简单实用的 Bootstrap3 表单验证插件,使你的表单不仅看起来专业,而且在功能上也能满足用户需求,提供良好的交互体验。在实际应用中,根据具体项目的需求,你可能还需要进行一些定制...
此外,良好的表单验证方案应该考虑用户体验,提供友好的错误提示,而不是简单地阻止提交。例如,错误信息应清晰地显示在出错的表单字段附近,并在用户更正后及时消失。 文件名为“极好的表单验证方案”的压缩包很...
在Struts框架中,表单验证通常通过两个主要方式实现:客户端验证和服务器端验证。 1. 客户端验证: 客户端验证发生在用户的浏览器上,通常使用JavaScript或jQuery等库来执行。这种方式可以即时反馈错误,提高用户...
在实际开发中,DWR可以用于各种场景,如实时数据显示、表单验证、动态表格更新等。配合HTML和JavaScript,可以构建出高度交互性的Web应用。 在学习和使用DWR时,理解以下几个关键概念很重要: - **配置文件**:DWR...
本文将深入探讨Struts2的表单验证机制。 首先,Struts2的输入验证分为两种方式:手动验证和使用验证框架。 **手动验证**主要包括两种方法: 1. **重写validate()方法**:这是最基础的方式,所有Action类都需要继承...
3. jQuery或Vue/React/Angular等框架的验证插件:这些现代前端框架提供了丰富的验证库,如jQuery Validation、Vee Validate、Formik等,它们简化了表单验证的实现,提供丰富的验证规则和友好的用户体验。 二、后端...
它内置了一系列常用的基础校验规则,例如非空校验、字符长度限制、数字范围校验以及邮箱格式验证等,这些规则能够覆盖大多数表单校验场景的基本要求。对于项目中一些特定的校验需求,Vuerify允许开发者自定义校验...
获取表单数据非常简单,只需在Vue实例上使用`this.$refs`访问到表单的引用,然后调用`validate`方法进行数据校验,最后通过`this.$refs.formRef.model`获取已填充的数据: ```js methods: { handleSubmit() { ...
**jQuery FormValidation插件**是前端开发中一个广泛使用的工具,专门用于实现高效且用户友好的表单验证。这个插件基于流行的JavaScript库jQuery构建,它简化了在Web应用程序中实施复杂的验证规则的过程。在标题提到...
"简单好用的Web后台管理框架"是一个专为提高开发效率而设计的解决方案,它包含了导航菜单、增删改查页面以及登录页面等功能,为开发者提供了完整的后台管理模板。 首先,我们来了解一下后台管理框架的基本概念。...
Vueform Vueform 是 Vue.js 的开源表单框架。它标准化了整个表单构建过程,同时负责从渲染到验证和处理的所有事项25+ 种表单元素,具有多文件上传、日期选择器和富文本编辑器元素嵌套和重复具有 Tailwind 支持的完整...
layui框架提供了丰富的前端表单验证功能,通过简单的配置即可实现对输入字段的校验。 #### 二、验证规则详解 根据提供的代码片段,我们可以看到几个具体的验证规则: ##### 1. 邮箱验证 ```javascript form....