用户表单的抽象 - 表单验证可以更灵活 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

<main>
  <h2>添加用户</h2>
  <form>
    <label>
      姓名
      <input type="text" name="name">
    </label>
    <label>
      性别
      <input type="text" name="gender">
    </label>
    <label>
      文化分
      <input type="text" name="score">
    </label>
    <label>
      平时分
      <input type="text" name="quality">
    </label>
    <button type="submit">提交</button>
  </form>
</main>

:root {
  font-family: sans-serif;
  color: #444;
  font-size: 15px;
}

body {
  margin: 0;
}

input, button {
  padding: .6rem;
  border: 1px solid rgba(0, 0, 0, .1);
  outline: 0;
  font-size: .8rem;
}

input:focus,
button:focus {
  outline: 2px solid #cfa8ff;
}

form label,
form input {
  display: block;
  width: 100%;
  margin: .3rem 0;
}

form label {
  margin-bottom: 1rem;
}

main {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

button[type=submit] {
  width: 100%;
  color: #fff;
  background: #7326d1;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table > * {
  text-align: left;
}

table th,
table td {
  padding: .6rem;
}

table thead {
  border-bottom: 3px solid rgba(0, 0, 0, .1);
}

table td {
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

table tr:last-of-type td {
  border: 0;
}

tbody tr:hover {
  background: #f4ebff;
}

/*视图部分开始*/
class UserForm {
  /**
   * @param {string} selector 表单对应的选择器
   */
  constructor(selector) {
    this.el = document.querySelector(selector);
    this.bindEvents();
  }

  /**
   * 绑定必要初始事件
   */
  bindEvents() {
    let form = this.el;
    let q = form.querySelector.bind(form);
    // 绑定表单提交事件
    this.el.addEventListener('submit', e => {
      e.preventDefault();
      // 拿到每项input的值
      let name = q('[name=name]').value;
      let gender = q('[name=gender]').value;
      let score = q('[name=score]').value;
      let quality = q('[name=quality]').value;

      // 使用构建者实例分别设置用户的每一项属性
      let builder = new Builder();
      builder.setName(name);
      builder.setGender(gender);
      builder.setScore(score);
      builder.setQuality(quality);
      console.log(builder.build());
    });
  }
}

/*视图部分结束*/

/*数据部分开始*/
/**
 * 用户
 */
class User {}

/**
 * 用户构建者
 */
class Builder {
  constructor() {
    // 在实例内部保存User实例
    this.instance = new User;
  }

  /**
   * 设置名字
   * @param {string} name
   * @return {Builder}
   */
  setName(name) {
    let maxLength = 10;
    if (!name)
      throw '姓名不可为空';

    if (name.length > maxLength)
      throw `姓名长度不可大于${maxLength}`;

    this.instance.name = name;
    return this;
  }

  /**
   * 性别
   * @param {string} name
   * @return {Builder}
   */
  setGender(gender) {
    let genderSet = ['男', '女'];

    if (genderSet.indexOf(gender) < 0)
      throw '别闹，不合法的性别';

    this.instance.gender = gender;
    return this;
  }

  /**
   * 设置文化分
   * @param {number} score
   * @return {Builder}
   */
  setScore(score) {
    if (!this.validNumber(score))
      throw '别闹，文化分应该是阿拉伯数字';

    this.instance.score = score;
    return this;
  }

  /**
   * 设置平时分
   * @param {number} score
   * @return {Builder}
   */
  setQuality(quality) {
    if (!this.validNumber(quality))
      throw '别闹，平时分应该是阿拉伯数字';

    this.instance.quality = quality;
    return this;
  }

  /**
   * 是否为数字
   * @param val
   * @return {boolean|number}
   */
  validNumber(val) {
    return val == 0 || parseFloat(val);
  }

  /**
   * 返回组装好的User实例
   * @return {User}
   */
  build() {
    return this.instance;
  }
}

/*数据部分结束*/

let form = new UserForm('form');