Primeiro introduza no arquivo Vue que você precisa para usar o componente de formulário
import type { FormInstance } from 'element-plus'
Tire esta foto para explicar os atributos, o primeiro item ref="ruleFormRef", RuleFormRef é a condição necessária para definirmos e usarmos cada atributo, const regraFormRef = ref<FormInstance>() Depois de introduzir FormInstance, ou seja, FormInstance é uma interface, usada para especificar cada atributo, o segundo: model="ruleForm" é a coleção de objetos de regra de validação que definimos, :rules="rules" é a implementação das regras de validação, incluindo se é necessário, acionando eventos , Incluindo alteração e desfoque, label-width="120px" é a largura de um rótulo, e o rótulo sob el-form herdará automaticamente a largura do el-form, o que equivale a personalizar um rótulo e definir sua largura definida como 120px, classe é nosso nome de classe personalizado, você pode personalizar o estilo, o atributo size é o tamanho da caixa de entrada, incluindo três atributos grandes e pequenos padrão, o ícone de status é para verificar se a entrada está correta, haverá um correspondente no final da caixa de entrada O prompt do ícone, o padrão é falso,
posição da etiqueta O método de alinhamento da etiqueta possui três atributos: topo esquerdo direito.
A seguir está o atributo el-form-item. Mencionamos acima que regraForm é uma coleção de regras de validação, então como verificar se a entrada do usuário está em conformidade com as regras? Dois atributos precisam ser definidos. O primeiro é definir o atributo prop na tag el-form-item. Por exemplo, há uma regra de verificação de nome no objeto RuleForm aqui.
A segunda etapa é definir v-model='ruleForm.name' na tag el-input
semelhante a este
Agora você sabe onde as regras são usadas. Abaixo está a regra personalizada,
A primeira é definir regraForm, que é um objeto reativo e uma coleção de objetos de todas as regras
As regras específicas são as seguintes
Em primeiro lugar, validar é verificar o conteúdo de todo o formulário, seguido da implementação de regras específicas, e trigger é o evento acionado, mencionado acima.
Ele recebe três parâmetros, regra é a seguinte regra, valor é o conteúdo de entrada, retorno de chamada é uma função de retorno de chamada,
Podemos escrever nossas próprias expressões regulares para validar a entrada.
Nota: callback(), este parâmetro de callback deve ser escrito no final, caso não seja escrito, será sempre verificado, mesmo que o conteúdo inserido esteja de acordo com as regras.