elemento formulario reglas de validación personalizadas no obligatorias

Escenas a utilizar

Como todos sabemos, el elemento viene con algunas reglas de verificación. Por ejemplo, para verificar el tipo de algunos valores, podemos cambiar el atributo de tipo de la entrada para lograr el efecto que queremos. Si es necesario, podemos agregar requerido a verdadero en las reglas Si su valor en el formulario no es obligatorio, pero siempre que haya un valor, ¿se debe verificar el formato del valor? No existe un elemento de regla de formato en sí mismo, por lo que debemos personalizar las reglas de validación. Dos preguntas, ¿cómo escribir reglas de verificación personalizadas? ¿Qué hacer si no es requerido?

Reglas de verificación requeridas y reglas de verificación personalizadas

En primer lugar, veamos el método de escritura de las reglas de verificación requeridas.

data(){
    return{
          rules:{
        policyair: [{ required: true, message: "校验失败的消息提示", trigger: "change" }]
        }
    }
}

En este momento, alguien dirá, si no es obligatorio, puede cambiar el requisito a falso o no escribirlo en absoluto. Por supuesto, este es solo uno de ellos. Por supuesto que lo sé, pero no es un trampa que encontré. Primero mirémonos a mí mismo. Defina dónde están escritas las reglas de validación.

 data() {
    let checkwhitename = (rule, value, callback) => {
      const regwhitename = /^\w{2}(,\w{2})*$/;
        if (regwhitename.test(value)) {
           return callback();
        }else{
          callback(new Error("请参照示例输入白名单或黑名单"));
        }
    };
    return {
       rules:{
        policyair: [{validator: checkwhitename, trigger: "blur" }]
        }
    }

En primer lugar, hay dos puntos a tener en cuenta. Primero, la función de las reglas de verificación personalizadas está escrita en los datos, pero no en el {} de retrun. En cuanto a por qué, no entiendo. Mientras se use esta función de acuerdo con las reglas del elemento, cinco Hay tres parámetros, pero generalmente solo se usan 3. La primera regla es el objeto que participa actualmente en la verificación de la regla, el valor es el valor que participa en la verificación y la devolución de llamada es la devolución de llamada después del éxito. El segundo punto es que esta función de validación personalizada debe usarse como el valor del validador en los objetos que participan en la validación de las reglas. En la política de verificación, eliminé el atributo requerido, lo que significa que no es obligatorio. Pensé que podría salir del trabajo de esta manera, pero cuando envío el formulario, siempre me indica que la verificación falla o que este formulario no obligatorio es no válido Aprobado, por lo que todavía no podemos escribir requerido como falso, así que bloqueé el problema en la función de verificación personalizada.

Reescriba la función personalizada para resolver el error

El problema clave radica en la devolución de llamada, donde la devolución de llamada es equivalente a next(), sin la cual el programa completo no fallará.

 data() {
    let checkwhitename = (rule, value, callback) => {
      const regwhitename = /^\w{2}(,\w{2})*$/;
      if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
      }else{
        if (regwhitename.test(value)) {  //验证通过也下一步
           return callback();
        }else{
          callback(new Error("请参照示例输入白名单或黑名单")); //验证不通过下一步只是抛出个错误
        }
      }
    };
    return {
       rules:{
        policyair: [{validator: checkwhitename, trigger: "blur" }]
        }
    }

De esta manera, mi problema está resuelto. Cuando hacemos una verificación personalizada, las reglas regulares se pueden encontrar en línea. Todavía debemos prestar un poco de atención a la lógica de verificación. Aunque el problema no es grande, es una pérdida de tiempo, espero que todos no tomen el mismo desvío que yo.