Go语言视频零基础入门到精通

不要错过

主要特征

    * 简洁的验证语法
    * 快速
    * 无需编写验证提示信息
    * 支持组合验证
    * Ajax支持
    * 基于prototype.js
    * 无侵入性
    * 支持国际化
    * 易于扩展
    * 基于标准的HTML属性(class)添加验证,易于其它标准的jsp taglib集成

支持浏览器

    * IE 5.x 以上
    * Mozilla 1.4 以上
    * FireFox 0.9 以上
    * Opera 8.5 测试通过

helloworld示例

引用文件

java代码

<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"/>  
<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文件中去.

表单验证

Java代码

<!-- 为form增加required-validate class,标识需要验证form -->   
<form id='helloworld' action="#" class='required-validate'>   
    helloworld:</br>   
    <!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 -->   
    <textarea name='content' class='required min-length-15'></textarea></br>   
    <input type='submit' value='Submit'/>     
    <input type='reset' value='Reset'/>   
</form>  
<!-- 为form增加required-validate class,标识需要验证form -->

<form id='helloworld' action="#" class='required-validate'>

  helloworld:</br>

  <!--通过class添加验证: required表示不能为空,min-length-15表示最小长度为15 -->

  <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验证提交的地址,错误提示信息将由服务器端返回.
数据示例

Java代码

<input name="username" value="badqiu"/>  
<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,在指定是可以给定一些选项

     

Java代码

<script type="text/javascript">   
        var valid = new Validation('form-id', {onSubmit:false});   
              // do something ...   
              var result = valid.validate();   
     </script>  
<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

Java代码

/*参数说明   
* 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'],   
]  
/*参数说明

* 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

   1. 我的网站现在使用的是UTF-8编码,怎么使用validation_cn.js显示中文会乱码?
      答:validation_cn.js默认是使用GBK编码,使用可以改变文件编码的编辑器以UTF-8编码方式再保存,如保存为validation_cn_UTF-8.js
   2. 国际化怎么办?
      答:动态修改Validator.messageSource即可
   3. 日期之间的比较怎么办,如结束日期要大于开始日期
      答:先使用validate-date验证输入的值是合法的日期,再加上"less-than"的比较即可
   4. select的验证
      答:将Please Select..的值使用一个空格填充即可

      

Java代码

<select id="test" name="test" class="required">   
    <option value=" "&gtlease Select..</option>   
    <option value="val1">Value 1</option>   
    <option value="val2">Value 2</option>   
</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>



   5. 在IE中提示"Unterminated string constant"或是"末结束的字符串常量"错误
      答: 是由于你网页的编码问题,validation_cn.js默认是GBK编码,请转换成与你的网页想适应的编码