前些日子写过的,但是不知怎么的,在FireFox上可以看,在IE下看不到文章。所以只好删掉,重写一次。
初学JavaEE,什么都不知道,在论坛浏览的时候,偶尔看到一个页面验证的js文件,感觉
很好,甚是感谢写这些工具的高手,憧憬自己有一天也能写出供大家使用的工具函数。
Badqiu在原来外国那哥们写的基础上又加了一些功能,但是他给的是GBK 编码的文件,我
觉得UTF-8比较方便,自己用记事本另存了一下为UTF-8模式。
Validation.js 的使用。
1. 在网页中引入一下文件:
<script type='text/javascript' src='../script/prototype.js'></script>
<script type='text/javascript' src='../script/validation.js'></script>
<script type="text/javascript" src="../script/effects.js"></script>
<link rel="stylesheet" type="text/css" href="script/style.css" />
由于prototype升级了,可能导致报错,badqiu说是effects.js兼容性问题,这是一个样
式效果文件。可以不用试试看,不行的话就使用它自带的prototype文件。
2. 在body后面加入一个sctipt
<script type="text/javascript">
var validation = new Validation("form1", {
immediate :true,
onSubmit :true,
stopOnFirst :true
});
function saveU(){
var result=validation.validate();
if(result)
{
//dosomething.....
}
}
</script>
onSubmit : true, 校验监听form提交事件
stopOnFirst : false, form校验不通过 遇到第一个出错的就停止校验 不进行其余
元素的校验
immediate : false, form元素 焦点失去的时候 校验否
focusOnError : true, 焦点是否停留在出错元素上
useTitles : false, 鼠标停留在元素上的时候是否显示提示信息
onFormValidate : function(result, form) {}, form验证执行完毕后调用的默认函
数
onElementValidate : function(result, elm) {} 元素验证执行完毕后调用的默认
函数
在默认情况下验证库给表单的onsubmit事件增加了一个监听器,当验证失败的时候阻止这
个事件的进行。如果设置可选项{onSubmit:false},它就不会阻止了。通过这种方式,可
以手动的调用自己的javascript验证函数。
也可以通过可选项{useTitles:true}来使验证器使用表单元素的title属性作为验证错误
的提示信息。
onFormValidate在表单验证执行之后被调用,获取两个参数:验证结果(true或者false
)和表单的符号。onElementValidate在每个表单元素验证之后被调用,也获取两个参数
:验证结果(true或者falsh)和表单元素符号。
3. 在需要验证的元素里加入class引用,这个框架是用class来引入的。
<input type="text" name="lname" id="lname" class="required"> 不可为空。
<input type="password" name="pwd" size="20" class="required validate-alphanum
min-length-4">
不可为空,为数字和字母,不小于4位
<input type="password" name="confirm_password" size="20" class="required
validate-equals-pwd">
密码校验,要等于上面pwd的输入内容。
下面是一个加入验证元素的可用的类清单:
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验证提交的地址,错误提示信息
将
由服务器端返回.
validate-selection 用于下拉列表框验证
validate-chinese 只能是中文(以下为中国的相关验证)
validate-phone 有效的电话
validate-mobile-phone 有效的手机号
validate-id-number 验证是否有效的身份证号码
validate-zip 验证邮政编码
4. 还可以手动校验某一个字段或值符合某种规则。这是一个静态的方法
var data=$("email").value;
Validation.get("validate-email").test(data) 返回一个boolean型值,这样你可以判
断在符合规则之后再拿去后台比较email是否可用。