ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js 创建简单的表单同步验证器

2020-07-05 17:08:02  阅读:174  来源: 互联网

标签:return 验证 SyncValidate 表单 key msg input js const


SyncValidate

/**
 * 同步验证器
 */
export class SyncValidate {

  /**
   * { [key]: Validate[] }
   * @param {Object} options
   */
  constructor(options) {
    this.options = options;
  }

  /**
   * check({key: value})
   * @param {Object} keyVal
   */
  check(keyVal) {
    const keys = Object.keys(keyVal);
    if (!keys.length) {
      throw new Error('至少的验证一个.')
    }

    // 只验证一个
    const key = keys[0];
    const val = keyVal[key];

    if (!this.options.hasOwnProperty(key)) {
      throw new Error(`没有设置[${key}]的验证器.`)
    }

    for (let v of this.options[key]) {
      const errorMessage = v(val);
      if (errorMessage) {
        if (this.validateErrorListener && typeof this.validateErrorListener === 'function') {
          this.validateErrorListener(errorMessage)
        }
        // 验证失败立即返回
        return false;
      }
    }

    // 验证ok返回true
    return true;
  }

  // 添加验证错误时的回调函数
  addValidateErrorListener(validateErrorListener) {
    this.validateErrorListener = validateErrorListener;
  }


  // 必填
  static required(msg) {
    return (input) => {
      if (!input) return msg;
    }
  }

  // 最小长度
  static minLength(len, msg) {
    return (input) => {
      if (input.length < len) return msg;
    }
  }

  // 最大长度
  static maxLength(len, msg) {
    return (input) => {
      if (input.length > len) return msg;
    }
  }

  // 简单的验证手机号
  static phone(msg, exp) {
    const phoneExp = exp || /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
    return (input) => {
      if (!input.match(phoneExp)) {
        return msg;
      }
    }
  }
  
  // 简单的判断相等
  static eql(data, msg) {
    return (input) => {
      if(input !== data) return msg;
    }
  }
  
  // 简单的判断相等
  static equal(data, msg) {
    return (input) => {
      if(input != data) return msg;
    }
  }
}

使用

const syncValidate = new SyncValidate({
  username: [
    SyncValidate.required('用户名不能为空!'),
    SyncValidate.phone('请输入正确手机号!'),
  ],
  password: [
    SyncValidate.required('密码不能为空!'),
    SyncValidate.minLength(8, '密码长度必须大于7'),
  ]
});

syncValidate.addValidateErrorListener((errorMessage) => {
  uni.showToast({
    icon: 'none',
    title: errorMessage,
    duration: 1500
  });
})

onLogin() {
if (
    !syncValidate.check({username: this.username.trim()})
    ||
    !syncValidate.check({password: this.password.trim()})
   ) 
      {
        return;
      }
        ...
}

标签:return,验证,SyncValidate,表单,key,msg,input,js,const
来源: https://www.cnblogs.com/ajanuw/p/13246729.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有