elemento-ui-verificar
Este artículo tiene como objetivo presentar el uso del complemento element-ui-verify y compararlo con el método de verificación nativo de elementUI, destacando que el complemento puede lograr efectos de verificación nativos o incluso mejores con una pequeña cantidad de código.
1. Primero observe un ejemplo.
<template>
<d2-container>
<el-form :model="ruleForm" :rules="rules" label-width="100px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
export default {
data () {
return {
ruleForm: {
name: ''
},
rules: {
name: [
{
required: true, message: '请输入活动名称', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
}
}
</script>
Lo anterior es un ejemplo de verificación del documento oficial.
<template>
<d2-container>
<el-form :model="ruleForm2" label-width="100px">
<el-form-item label="活动名称" prop="name" verify :minLength="3" :maxLength="5">
<el-input v-model="ruleForm2.name" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
export default {
data () {
return {
ruleForm2: {
name: ''
}
}
}
}
</script>
Lo anterior es un ejemplo del uso del complemento element-ui-verify: la variable de verificación escrita originalmente en los datos se cambia al atributo de el-form-item para la verificación, lo que hace que el código sea más conciso.
2. Introducción al complemento element-ui-verify.
Este complemento solo encapsula el método de verificación original de ElementUI. El verificador principal sigue siendo un validador asíncrono, que no es intrusivo y no afectará su uso continuo del ElementUI nativo.comprobar.
3.Instalación y uso del complemento Element-ui-verify
npm instala elemento-ui-verificar
introducir
import Vue from 'vue'
import elementUI from 'element-ui'
import elementUIVerify from 'element-ui-verify'
// 这里注意必须得先use elementUI
Vue.use(elementUI)
Vue.use(elementUIVerify)
Atributos de reglas de validación admitidos de forma predeterminada
length: la longitud del texto de control
minLength: la longitud mínima del texto de control
gt: el dígito de control debe ser mayor que un número determinado
gte: el dígito de control debe ser mayor o igual a un número determinado
lt: el dígito de control debe ser menor que un número determinado
lte: el dígito de control debe ser menor o igual a un número determinado Número
maxDecimalLength: Verificar el número máximo de decimales
número: Verificar si es un número
int: Verificar si es un número entero
teléfono: Verificar si es un número de teléfono móvil (a medida que aumenta el segmento de número, es posible que deba actualizarse en el futuro)
correo electrónico: verifique si es dirección de correo electrónico
verificar código: verifique si es un código de verificación de 6 dígitos
La verificación predeterminada del complemento no pasa la plantilla de solicitud
const errorMessageTemplate = {
empty: '请补充该项内容',
length: '请输入{length}位字符',
minLength: '输入内容至少{minLength}位',
number: '请输入数字',
int: '请输入整数',
lt: '输入数字应小于{lt}',
lte: '输入数字不能大于{lte}',
gt: '输入数字应大于{gt}',
gte: '输入数字不能小于{gte}',
maxDecimalLength: '该输入项最多接受{maxDecimalLength}位小数',
phone: '请输入正确的手机号',
email: '请输入正确的邮箱',
verifyCode: '请输入正确的验证码'
}
// 可以对上面默认的错误提示模板修改
// 如第一项修改（用于复用错误提示） empty: '{alias}不能为空'
// 然后使用修改后的模板
Vue.use(elementUIVerify, {
errorMessageTemplate,
fieldChange: 'verify'
})
// 其中 verify-当绑定字段变化时会实时触发校验，clear-当绑定字段变化时只清空校验结果，不触发校验
4. Descripción de atributos importantes
verificar
Para usar el complemento element-ui-verify, se requiere la opción de verificación. Si esta opción no está configurada, la verificación nativa de ElementUI aún se puede usar normalmente. Esta opción también puede recibir un valor de función para métodos de verificación personalizados.
puede estar vacío
Si esta opción está activada, una vez que el elemento de entrada esté vacío, se ignorarán todas las verificaciones posteriores al elemento de entrada.
espacio
Cuando esta opción está activada, cuando el complemento realiza una detección nula, ingresar un espacio puede pasar
mensaje vacío
Mensaje de error de detección nula
mensaje de error
Se utiliza para mensajes de error de verificación personalizados (los mensajes de error para la detección nula y los métodos de verificación personalizados no se ven afectados por este valor)
alias
Para reutilizar mensajes de error, es necesario modificar la plantilla de mensajes de error, como {vacío: '{alias} no puede estar vacío'}
mirar
Monitorear otras variables y activar la autoverificación
El primer ejemplo, verificación de coherencia de la contraseña.
<template>
<d2-container>
<!-- 使用watch属性 密码一致性校验 -->
<el-form :model="model">
<el-form-item label="密码" prop="pass1" verify>
<el-input v-model="model.pass1" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
<el-input v-model="model.pass2" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
export default {
data () {
return {
model: {
pass1: '',
pass2: ''
}
}
},
methods: {
verifyPassword (rule, val, callback) {
if (val !== this.model.pass1) callback(Error('两次输入密码不一致！'))
else callback()
}
}
}
</script>
En el segundo ejemplo, los cambios en el número mínimo de personas activarán la verificación del número máximo de personas.
<template>
<d2-container>
<!-- 最少人数变化要触发最多人数的校验 -->
<el-form :model="model">
<el-form-item label="最少参与人数" prop="minNumber" verify int :gt="0">
<el-input v-model="model.minNumber" style="width: 200px"></el-input>
</el-form-item>
<el-form-item label="最多参与人数" prop="maxNumber" verify int :gt="model.minNumber">
<el-input v-model="model.maxNumber" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</d2-container>
</template>
export default {
data () {
return {
model: {
minNumber: '',
maxNumber: ''
},
}
}
Método de verificación personalizado
verificar
<template>
<d2-container>
<!-- 自定义校验方法 -->
<el-form :model="model">
<el-form-item label="卡号" prop="cardNumber" :verify="verifyCardNumber" :length="6">
<el-input v-model="model.cardNumber" style="width: 200px"></el-input>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
export default {
data () {
return {
model: {
cardNumber: ''
}
}
},
methods: {
// callback形式 校验是否是010，011开头的卡号
verifyCardNumber (rule, val, callback) {
if (!['010', '011'].includes(val.substr(0, 3))) callback(Error('错误的卡号'))
else callback()
}
}
}
</script>
Reglas de verificación personalizadas
addRule (se aplica globalmente)
continuará. . .