<div class="form_group tel">
  <label for="name">手机</label>
  <input type="tel" name="tel" id="tel">
  <p class="message"></p>
</div>

// 配置
{
  target: '#tel', // 验证目标
  message: { target: '.tel p', success: '手机格式正确' }, // 验证信息显示的地方
  validators: [ // 验证规则数组
    { name: 'tel', args: { message: '手机格式错误' } }
  ]
}

// 针对手机号的验证规则
const tel = (str='', {message=''}={}) =>
({
  status: /^1[3|4|5|7|8][0-9]{9}$/.test(str), // 验证状态
  message // 报错信息
})

class Validator {
  // 接受配置 validatorConfig: 验证器配置, targetConfig: 针对于表单的配置
  /*
  * validatorConfig {}
  *   - error   每个表单验证失败时的函数   Function
  *   - success 每个表单验证成功时的函数   Function
  *   - reset   对表单执行重置操作时的函数 Function
  * targetConfig [{}, {}, ...] -> 各个表单的配置
  *   - target        验证目标的选择器  String(Selector)
  *   - message       验证信息的配置  Object
  *     - target      验证信息显示位置的选择器  String(Selector)
  *  - placeholder 验证信息的默认值，重置时会显示该文本 String
  *  - success     验证成功时会显示该文本   String
  *  - validators    验证规则的配置  [{}, {}, ...] -> 各个验证规则的配置
  *    - name        验证规则的名字 (validators[key])  String
  *    - args        验证规则的配置参数  Object
  *      - message   必有 该规则验证失败的显示文本  String
  *      - ...       该验证规则的其他配置参数  Any (各验证规则不同)
  */
  constructor (config) {}
  // 验证主逻辑
  _check () {}
  // 单个表单的验证 (只对单个表单执行 _check)
  run () {}
  // 执行全部表单的验证 (对所有要验证的表单执行 _check)
  runAll () {}
  // 重置表单为初始状态
  reset () {}
}

{
  target:  '#tel', // 验证目标
  // 验证信息显示的地方
  message:  { target: '.tel p', success: '手机格式正确' },
  validators: [ // 验证规则数组
    { name: 'tel', args: { message: '手机格式错误' } }
  ]
}

_check (config) {
    const
      validatorCfg  = this._validatorConfig,    // 验证器配置
      $target       = $(config.target),         // 验证的表单
      val           = $target.value,            // 验证的 value
      $message      = $(config.message.target), // 验证信息显示的地方
      ownValidators = config.validators,        // 所有验证规则
      result        = []                        // 失败信息数组

    let required = false // 不是必填项的话，只在有输入内容时进行检查 (默认为不必填)

    // 遍历执行验证器
    ownValidators.forEach(validator => {
      if (validator.name == 'required') required = true // 必填

      const temp = Validators[validator.name](val, validator.args) // 执行验证器

      // 如验证失败，则存储失败信息
      if ( ! temp.status) result.push( temp.message )
    })

    if ( ! required && val.length === 0) return // 可跳过检验

    if (result.length > 0) { // 有错误信息
      validatorCfg.error && validatorCfg.error($target) // 失败回调
      $message.textContent = result[0]
    }
    else { // 验证通过
      validatorCfg.success && validatorCfg.success($target) // 成功回调
      $message.textContent = config.message.success || ''
    }
  }

// 单个验证 需传入要验证 input 的 id
run (target) {
  // 得到当前要验证的表单的配置
  const curConfig = this._targetConfig.filter(config => config.target === `#${target}`)[0]

  this._check(curConfig)
}
// 执行全局验证
runAll () {
  this._targetConfig.forEach(this._check.bind(this))
}
// 重置表单
reset () {
  this._targetConfig.forEach(config => {
    const
      $target  = $(config.target),
      $message = $(config.message.target)

    $target.value        = ''
    $message.textContent = config.message.placeholder || ''
  })
  this._validatorConfig.reset( this._allTarget ) // 重置回调
}