表单格式验证

表单的每个name都是按照原型方法的名称，否则报错，也只能一样，才能检验相对应的方法 

 <form id="form">
    <input type="text" name="userName">
    <input type="password" name="userPwd">
    <input type="email" name="email"">
    <input type="tel" name="tel">
    <input type="button" value='提交' onclick="upload()">
  </form>

将表单内容序列化，然后生成Validate实例，进行验证

function upload() {
  let form = [];
  let formChildren = document.getElementById("form").children;
  formChildrenLength = formChildren.length;
  for (let i = 0; i < formChildrenLength; i++) {
    if (formChildren[i].type === "button") {
      continue;
    }
    form.push({ name: formChildren[i].name, value: formChildren[i].value });
  }
  let result = new Validate(form);
  result.getResult();
  console.log(result.get());       // 获取结果，全部通过为true
  console.log(result.getError());   // 获取错误的表单名
}

 还可以对Validate 原型上添加更多的验证方法，进行拓展

class ValidateForm {
  constructor(content) {
    this.content = content;  //表单内容，按[{name:...,value:...},{}]的形式
    this.result = true;      //结果：true说明表单格式都正确，凡有一个错误就是false
    this.errorItem = "";     // 那条表单出的错，没有的话就输出''
  }
  set(result) {             // 设置结果
    this.result = result;
  }
  get() {                   // 获得结果
    return this.result;
  }
  setError(errorItem) {     // 设置错误表单对应的name
    this.errorItem = errorItem;
  } 
  getError() {              // 获得错误表单对应的name  
    return this.errorItem;
  }
}

class Validate extends ValidateForm {
  constructor(content) {
    super(content);
  }
  getResult() {
    for (let i = 0; i < this.content.length; i++) {
      if (!this[this.content[i].name]) {
        throw new Error(`表单name:${this.content[i].name}无法识别`);
      }
      if (this[this.content[i].name](this.content[i].value) === false) {
        this.set(false);
        this.setError(this.content[i].name);
        return;
      }
    }
    return this.result
  }
  // 用户名验证:输入4-16位小写字母，大写字母，数字或汉字
  userName(string) {
    let pattern = /^[a-zZ-Z0-9_\u4E00-\u9FA5]{4,16}$/;
    return pattern.test(string);
  }
  // 密码验证：输入6-16位，必须包含数字和字母
  userPwd(string) {
    let pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{6,16}$/;
    return pattern.test(string);
  }
  // 邮箱验证
  email(string) {
    let pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    return pattern.test(string);
  }
  // 手机号验证
  tel(string) {
    let pattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
    return pattern.test(string);
  }
  // QQ验证
  QQ(string) {
    let pattern = /^[1-9][0-9]{4,10}$/;
    return pattern.test(string);
  }
}

对原型继承一直很模糊，还望大佬评论指正。