validation.js使用

 前些日子写过的，但是不知怎么的，在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是否可用。