O padrão de estratégia js implementa validação de formulário em grande escala

Quando estamos desenvolvendo páginas, às vezes encontramos algumas páginas de formulário, como informações pessoais, informações corporativas, informações de dispositivos, etc., que contêm muitos campos. As regras que precisam ser verificadas para cada campo são, na verdade, diferentes. Sim, o que podemos fazer se a página precisar ser verificada ao enviar o formulário? A abordagem convencional é julgar por if, mas se existem dezenas de regras de verificação, o código não tem muitos if? É uma dor de cabeça manter?

Não há muito a dizer, agora vamos usar o modo de estratégia para configurar dinamicamente as regras de verificação correspondentes, e então você pode implementar facilmente a verificação do formulário correspondente, e também é conveniente manter o código no futuro!

O resultado é o seguinte:

 O princípio é extrair o método de verificação em um objeto mantido publicamente, associar o nome do atributo da regra correspondente ao nome do atributo dos dados correspondentes e encontrar o método da regra de verificação correspondente por meio do campo de tipo na regra de verificação. O método de verificação retornará o identificador correspondente.Se falhar, será dada uma mensagem de erro para a configuração da regra correspondente.

Código do objeto do método de verificação:

const checkFn = {
  // 为空校验
  required (v, reg = '', msg = '') {
    if (!v) {
      console.log(reg);
      Message.warning(msg);
      return false;
    }
    return true;
  },
  // 正则规则校验
  reg (v, reg, msg) {
    if (!reg.test(v)) {
      Message.warning(msg);
      return false;
    }
    return true;
  },
  // 长度校验
  length (v, reg = [0, 0], msg) {
    if (v.length < reg[0] || v.length > reg[1]) {
      Message.warning(msg);
      return false;
    }
    return true;
  }
  // 后面扩展的校验方法。。。。。
};

Itens de configuração de regras:

rules: {
        username: [
          {type: 'required',reg: '', errMsg: '用户必填'},
          {type: 'reg', reg: /(^[1-9]\d*$)/, errMsg: '用户必须时正整数'},
          {type: 'length', reg: [1, 5], errMsg: '用户长度必须在1～5位'}
        ],
        password: [
          {type: 'required', reg: '', errMsg: '密码必填'},
          {type: 'reg', reg: /[A-Za-z]+/, errMsg: '密码必须包含应该英文'},
          {type: 'length', reg: [3, 8], errMsg: '长度必须在3～8位'}
        ],
        email: [
          { type: 'required', reg: '', errMsg: '邮箱必填' },
          { type: 'reg', reg: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, errMsg: '邮箱格式不正确' },
          { type: 'length', reg: [4, 9], errMsg: '邮箱长度必须在3～11位' }
        ],
        phone: [
          { type: 'required', reg: '', errMsg: '手机必填' },
          { type: 'reg', reg: /^1[3456789]\d{9}$/, errMsg: '手机格式不正确' },
          { type: 'length', reg: [1, 12], errMsg: '手机长度必须在11位' }
        ],
        cellphone: [
          { type: 'required', reg: '', errMsg: '电话必填' },
          { type: 'reg', reg: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, errMsg: '电话格式不正确' },
        ],
        address: [
          { type: 'required', reg: '', errMsg: '地址必填' },
          { type: 'length', reg: [1, 20], errMsg: '地址最长20位' }
        ],
        site: [
          { type: 'required', reg: '', errMsg: '网址必填' },
          { type: 'reg', reg: /^(https:\/\/|http:\/\/)/, errMsg: '网址格式不正确' }
        ],
      },

Como executar a verificação geral do formulário:

isPass () {
      for (let i in this.form) {
        let val = this.form[i]; // 值
        // 判断当前key是否有娇艳规则
        if (i in this.rules) {
          for (let k = 0; k < this.rules[i].length; k++) {
            let type = this.rules[i][k].type; // 执行校验类型
            let errMsg = this.rules[i][k].errMsg; // 执行校验类型
            let reg = this.rules[i][k].reg; // 执行校验类型
            let isTrue = checkFn[type](val, reg, errMsg);
            // 遇到第一个有校验规则不通过立即跳出函数
            if (!isTrue) {
              return isTrue;
            }
          }
        }
      }
      return true;
    },

Código geral: (ps: componente escrito em vue)

<template>
  <div class="login">
    <div class="content">
      <div class="right">
        <div class="box">
          <div class="title">
            <h2>表单校验</h2>
          </div>
          <div class="form">
            <div class="form-line">
              <el-input v-model="form.username" placeholder=" 用户名"></el-input>
            </div>
            <div class="form-line">
              <el-input type="password" v-model="form.password" placeholder=" 密码"></el-input>
            </div>
            <div class="form-line">
              <el-input v-model="form.email" placeholder=" 邮箱"></el-input>
            </div>
            <div class="form-line">
              <el-input v-model="form.phone" placeholder=" 手机"></el-input>
            </div>
            <div class="form-line">
              <el-input v-model="form.cellphone" placeholder=" 电话"></el-input>
            </div>
            <div class="form-line">
              <el-input v-model="form.address" placeholder=" 地址"></el-input>
            </div>
            <div class="form-line">
              <el-input v-model="form.site" placeholder=" 网址"></el-input>
            </div>
            <div class="form-line">
              <el-button type="primary" @click="login">登录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
const checkFn = {
  // 为空校验
  required (v, reg = '', msg = '') {
    if (!v) {
      console.log(reg);
      Message.warning(msg);
      return false;
    }
    return true;
  },
  // 正则规则校验
  reg (v, reg, msg) {
    if (!reg.test(v)) {
      Message.warning(msg);
      return false;
    }
    return true;
  },
  // 长度校验
  length (v, reg = [0, 0], msg) {
    if (v.length < reg[0] || v.length > reg[1]) {
      Message.warning(msg);
      return false;
    }
    return true;
  }
  // 后面扩展的校验方法。。。。。
};
export default {
  name: 'App',
  data () {
    return {
      rules: {
        username: [
          {type: 'required',reg: '', errMsg: '用户必填'},
          {type: 'reg', reg: /(^[1-9]\d*$)/, errMsg: '用户必须时正整数'},
          {type: 'length', reg: [1, 5], errMsg: '用户长度必须在1～5位'}
        ],
        password: [
          {type: 'required', reg: '', errMsg: '密码必填'},
          {type: 'reg', reg: /[A-Za-z]+/, errMsg: '密码必须包含应该英文'},
          {type: 'length', reg: [3, 8], errMsg: '长度必须在3～8位'}
        ],
        email: [
          { type: 'required', reg: '', errMsg: '邮箱必填' },
          { type: 'reg', reg: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/, errMsg: '邮箱格式不正确' },
          { type: 'length', reg: [4, 9], errMsg: '邮箱长度必须在3～11位' }
        ],
        phone: [
          { type: 'required', reg: '', errMsg: '手机必填' },
          { type: 'reg', reg: /^1[3456789]\d{9}$/, errMsg: '手机格式不正确' },
          { type: 'length', reg: [1, 12], errMsg: '手机长度必须在11位' }
        ],
        cellphone: [
          { type: 'required', reg: '', errMsg: '电话必填' },
          { type: 'reg', reg: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, errMsg: '电话格式不正确' },
        ],
        address: [
          { type: 'required', reg: '', errMsg: '地址必填' },
          { type: 'length', reg: [1, 20], errMsg: '地址最长20位' }
        ],
        site: [
          { type: 'required', reg: '', errMsg: '网址必填' },
          { type: 'reg', reg: /^(https:\/\/|http:\/\/)/, errMsg: '网址格式不正确' }
        ],
      },
      form: {
        username: '',
        password: '',
        email: '',
        phone: '',
        cellphone: '',
        address: '',
        site: ''
      }
    };
  },
  methods: {
    isPass () {
      for (let i in this.form) {
        let val = this.form[i]; // 值
        // 判断当前key是否有娇艳规则
        if (i in this.rules) {
          for (let k = 0; k < this.rules[i].length; k++) {
            let type = this.rules[i][k].type; // 执行校验类型
            let errMsg = this.rules[i][k].errMsg; // 执行校验类型
            let reg = this.rules[i][k].reg; // 执行校验类型
            let isTrue = checkFn[type](val, reg, errMsg);
            // 遇到第一个有校验规则不通过立即跳出函数
            if (!isTrue) {
              return isTrue;
            }
          }
        }
      }
      return true;
    },
    login () {
      if (!this.isPass()) {
        return;
      } else {
        Message.success('校验通过');
      }
    }
  }
};
</script>
<style lang="scss">
.login {
  .el-button--primary {
    width: 100%;
  }
  .el-input__inner {
    margin-bottom: 20px;
    background: none;
    border:1px solid #ccc;
    color: #333;
    font-size: 15px;
  }
}
</style>
<style lang="scss" scoped>
#mainBox {
  height:auto !important;
}
.login {
  font-size: 0;
  height: calc(100vh);
  overflow: hidden;
  background: #2e344e;
  // background:url('/static/images/1.jpg');
  .content {
    width:1000px;
    height: 100vh;
    margin:0 auto;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    display: block;
    .box {
      width: 400px;
      margin:0 auto;
      padding: 30px;
      background:#fff;
    }
    .title {
      h2 {
        padding-bottom: 20px;
        font-size: 20px;
        color: #3399ff;
        text-align: center;
      }
    }
  }
}
</style>