validate_y

sketchy form validator

Usage no npm install needed!

<script type="module">
  import validateY from 'https://cdn.skypack.dev/validate_y';
</script>

README

导出3个函数

  1. validate: 按传入参数顺序验证,验证失败后停止,触发当前失败元素的回调函数
  2. validateAll: 验证所有参数,通过error函数返回失败参数的key
  3. pattern: 可以访问内置的正则。

参数解释

  1. validate: validate(validates, success)
  • validates为需验证元素的数组,数组元素为对象格式
  validates = [
    {
      requirement: '',   (可传入内置正则字段,也可传入自定义验证'函数')
      value: '',         (验证参数值)
      cb: () => {        (该元素验证失败的回调函数)
        console.log('你的操作');
      }
    }
  ]
  • success: 全部元素认证通过后的成功回调

  1. validateAll: validateAll(validates, error, success)
  • validates为需验证元素的数组,数组元素为对象格式
  validates = [
    {
      requirement: '',  (可传入内置正则字段,也可传入自定义验证'函数')
      key: '',          (验证参数key值)
      value: '',        (验证参数值)
    }
  ]
  • error: 验证失败的回调函数,参数为失败元素key值的数组合集
  • success: 验证成功的回调函数

内置正则参数

['userName', 'phone', 'password', 'strongPsd', 'id', 'ChineseName', 'email', 'qq', 'wechat', 'carTag', 'notBlank', 'integer', 'positiveInteger', 'negtiveInetger', 'number', 'positiveNumber', 'negtiveNumber', 'ifFn']

  1. userName: 用户名(4到16位,字母,数字,下划线,减号)
  2. phone: 手机号(至2018年4月)
  3. password: 密码(6~18位英文或数字组合)
  4. strongPsd: 密码强度(最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符)
  5. id: 身份证
  6. ChineseName: 中文名(不允许有特殊字符、数字和英文)
  7. email: 邮件
  8. qq: qq
  9. wechat: 微信(6至20位,以字母开头,字母,数字,减号,下划线)
  10. carTag: 车牌号
  11. notBlank: 非空
  12. integer: 整数
  13. positiveInteger: 正整数
  14. negtiveInetger: 负整数
  15. number: 数字
  16. positiveNumber: 正整
  17. negtiveNumber: 负数
  18. ifFn: javascript函数

内置正则参数

  import { validate, validateAll, pattern } from 'validate_y'
  // 1. 按data顺续验证
  const data = [
                  {
                    requirement: 'notBlank',
                    value: this.name,
                    cb: () => {
                      // 失败回调
                    }
                  },
                  {
                    requirement: 'positiveNumber',
                    value: this.amount,
                    cb: () => {
                      // 失败回调
                    }
                  },
                  {
                    requirement: 'notBlank',
                    value: this.date,
                    cb: () => {
                      // 失败回调
                    }
                  },
                  {
                    requirement: 'notBlank',
                    value: this.notes,
                    cb: () => {
                      // 失败回调
                    }
                  },
                  {
                    requirement: 'notBlank',
                    value: this.picBase64,
                    cb: () => {
                      // 失败回调
                    }
                  }
                ]
  validate(data, () => {
    // 成功回调
    console.log('success');
  })

  // 2. 全部验证后,返回失败字段
  const data = [
                  {
                    requirement: 'notBlank',
                    value: this.name,
                    key: '自己定义的识别值'
                  },
                  {
                    requirement: 'positiveNumber',
                    value: this.amount,
                    key: '自己定义的识别值'
                  },
                  {
                    requirement: 'notBlank',
                    value: this.date,
                    key: '自己定义的识别值'
                  },
                  {
                    requirement: 'notBlank',
                    value: this.notes,
                    key: '自己定义的识别值'
                  },
                  {
                    requirement: 'notBlank',
                    value: this.picBase64,
                    key: '自己定义的识别值'
                  }
                ]
  validateAll(data, (keys) => {
    // 失败回调
    // keys为失败元素的数组
  }, () => {
    // 成功回调
  });