表单验证工具v0.2-API

Validate

表单验证工具，根据给出的规则判断表单中元素的内容是否匹配规则，并给出相应的提示信息。本控件需要在相关文档的底部或者Dom Ready后调用初始化。务必保证初始化时相关dom已存在。

方法：init

validate.init(rules[, config]);

参数：

    o

  1. rules – (Array)配置参数列表, [rule1, rule2, rule3, … , rulen]
      o

    1. id – (String)要验证的input等对象的ID

      2. o

    2. type – (String, optional)要验证的类型，目前系统提供了5种类型，分别是notEmpty, email, cellphone, date, number

      3. o

    3. regexp – (RegExp, optional)自定义验证正则表达式

      4. o

    4. length – (String, optional)基本套用正则表达式长度的规则,+表示大于等于1，{n}表示长度为n，{n,}表示长度大于等于n，{n,m}表示长度在n到m之间

      5. o

    5. url – (String, optional)进行Ajax验证时需要传入的url

      6. o

    6. nullable – (bool, optional)是否可为空

      7. o

    7. message – (String, optional)验证出错时提示的自定义信息

      8. o

    8. offsetX – (Number, optional)偏移的x坐标值

      9. o

    9. offsetY – (Number, optional)偏移的y坐标值

      10. o

    10. valid – (Function, optional)自定义验证函数

      11. o

    11. trigger – (Function, optional)触发验证事件的自定义函数

      12. o

    12. onReset – (Function, optional)要验证的input等对象的ID

      13. o

    13. onValid – (Function, optional)要验证的input等对象的ID

    2. o

  2. config – (Object, optional)validate配置参数
      o

    1. trigger – (String, optional)触发验证事件方式，默认是blur

      2. o

    2. reset – (String, optional)重置事件方式，默认是focus

      3. o

    3. parentContainer – (String, optional)父容器，用于包含提示信息，默认是document.body

示例：

init方法调用示例

validate.init([
o{id: 'yourId1', type: 'notEmpty', message: '不能为空', offsetX: 30},
o{id:'password',type:'notEmpty', message: '密码至少为6位，且包含数字和字母', offsetY: 30, length: '{6,}', valid: function(){
oreturn /\d+/.test(this.value) && /[A-Za-z]+/.test(this.value);
o}}
]);

演示：

用户信息测试表单

方法：check

检查表单是否能够通过验证，如果包含ajax验证则会在通过验证后执行回调函数

validate.check([callback]);

参数：

    o

  1. callback – (Function, optional)如果验证的规则中有ajax验证，会在通过验证后执行本回调函数

方法：getGuid

根据时间和随机数，获取唯一标识码

validate.getGuid();

VNode

表单验证的每一个节点，存储了验证的规则，及相关的验证逻辑

VNode(rule);

参数：

    o

  1. rule – (object)包含了各种配置参数的对象
      o

    1. id – (String)要验证的input等对象的ID

      2. o

    2. type – (String, optional)要验证的类型，目前系统提供了5种类型，分别是notEmpty, email, cellphone, date, number

      3. o

    3. regexp – (RegExp, optional)自定义验证正则表达式

      4. o

    4. length – (String, optional)基本套用正则表达式长度的规则,+表示大于等于1，{n}表示长度为n，{n,}表示长度大于等于n，{n,m}表示长度在n到m之间

      5. o

    5. url – (String, optional)进行Ajax验证时需要传入的url

      6. o

    6. nullable – (bool, optional)是否可为空

      7. o

    7. message – (String, optional)验证出错时提示的自定义信息

      8. o

    8. offsetX – (Number, optional)偏移的x坐标值

      9. o

    9. offsetY – (Number, optional)偏移的y坐标值

      10. o

    10. valid – (Function, optional)自定义验证函数

      11. o

    11. trigger – (Function, optional)触发验证事件的自定义函数

      12. o

    12. onReset – (Function, optional)要验证的input等对象的ID

      13. o

    13. onValid – (Function, optional)要验证的input等对象的ID

HintMessage

提示信息对象

HintMessage(referNode, [offsetX, offsetY]);

参数：

    o

  1. referNode – (HTMLElement)引用的对象

    2. o

  2. offsetX – (Number, optional)x坐标偏移量

    3. o

  3. offsetY – (Number, optional)y坐标偏移量