<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
Escribir reglas de reglas en datos:
rules {
name: [ {
type: 'string',required: true,message: "名称必填", trigger: 'blur'},
{
max: 30,message: "名称长度不能超过30位" }]
}
donde nombre es el nombre del accesorio
tipo: tipo
requerido: si es obligatorio (si esta columna está vacía)
mensaje:""Establezca el mensaje de aviso cuando no se cumpla la regla de verificación;
disparador:""Establezca el método de activación de la verificación:
'cambio': se activa cuando los datos cambian; de uso común: validación del cuadro de entrada
'desenfoque': se activa cuando se pierde el foco; de uso común: selección de cuadro desplegable, cuadro de selección de fecha, selector de fecha, casilla de verificación, radio patrón
: validación de expresión regular
Validador de formulario: el validador se puede verificar utilizando un método personalizado
Las reglas de verificación y la verificación de expresiones regulares comunes que vienen con las reglas de vue
rules: {
//验证非空和长度
name: [{
required: true,
message: "站点名称不能为空",
trigger: "blur"
},{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}],
//验证数值
age: [{
type: 'number',
message: '年龄必须为数字值',
trigger: "blur"
}],
//验证日期
birthday:[{
type: 'date',
required: true,
message: '请选择日期',
trigger: 'change'
}],
//验证多选
habit: [{
type: 'array',
required: true,
message: '请至少选择一个爱好',
trigger: 'change'
}],
//验证邮箱
email: [{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}],
// 验证手机号
telephone: [{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}],
// 验证经度 整数部分为0-180小数部分为0到7位
longitude: [{
pattern: /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,7})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/,
message: "整数部分为0-180,小数部分为0到7位",
trigger: "blur"
}],
// 验证维度 整数部分为0-90小数部分为0到7位
latitude: [{
pattern: /^(\-|\+)?([0-8]?\d{1}\.\d{0,7}|90\.0{0,6}|[0-8]?\d{1}|90)$/,
message: "整数部分为0-90,小数部分为0到7位",
trigger: "blur"
}]
}
Expresiones regulares comunes
1、是否合法IP地址:
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
2.是否手机号码或者固话
/^((0\d{
2,3}-\d{
7,8})|(1[34578]\d{
9}))$/,
3. 是否身份证号码
/(^\d{
15}$)|(^\d{
18}$)|(^\d{
17}(\d|X|x)$)/,
4.是否邮箱
/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整数填写
/^-?[1-9]\d*$/,
6.正整数填写
/^[1-9]\d*$/,
7.小写字母
/^[a-z]+$/,
8.大写字母
/^[A-Z]+$/,
9.大小写混合
/^[A-Za-z]+$/,
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
/^\d{
8}(\,\d{
8})*$/,
11.数字加英文，不包含特殊字符
/^[a-zA-Z0-9]+$/,
12.前两位是数字后一位是英文
/^\d{
2}[a-zA-Z]+$/,
13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){
6,20}$/,
14.中文校验
/^[\u0391-\uFFE5A-Za-z]+$/
También puede consultar expresiones regulares comunes para generar saltos de clics en el sitio web.
Utilice el verificador validador para verificar
prop corresponde al campo del modelo de campo de formulario, que es obligatorio cuando se utiliza el método de validación.
rules: {
age: [
{
validator: checkAge , type: "number", trigger: "change"},
]
},
Si se utiliza el validador para la verificación,
el método de verificación debe estar en datos y en el mismo nivel que la devolución.
var checkAge = (rules, value, callback) =>{
if (!value) {
return callback(new Error("年龄不可以为空"));
}
setTimeout(() => {
if (value == null && value == undefined && value == "") {
return callback(new Error("年龄不可以为空"));
}else if(value >= 150 || value <= 0 ){
return callback(new Error("年龄有误"));
}else {
return callback();
}
},100)
};
reglas vinculadas al elemento de formulario
Las reglas no están vinculadas a from sino a form-item; el método de prueba checkAge debe escribirse en métodos: {}
<el-form :model="ruleForm" ref="ruleForm">
<el-form-item label="名称" prop="name"
:rules="[{ type: 'string',required: true,message: ‘名称必填’, trigger: 'blur'},{ validator: checkAge, trigger: 'blur' }]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
methods: {
checkAge(rules, value, callback){
if (!value) {
return callback(new Error("年龄不可以为空"));
}
setTimeout(() => {
if (value == null && value == undefined && value == "") {
return callback(new Error("年龄不可以为空"));
}else if(value >= 150 || value <= 0 ){
return callback(new Error("年龄有误"));
}else {
return callback();
}
},100)
}
}
Si hay un elemento requerido *, significa que el elemento requerido es incorrecto
enlace de referencia
* La identificación de los elementos requeridos es incorrecta y el |* de los elementos requeridos en el formulario cambiará cada vez. Puede ser que haya demasiados elementos requeridos en las reglas (las reglas tienen 8 verificaciones requeridas, pero el real renderizado solo 3 deben completarse y los demás están ocultos) y use los componentes de control v-if o v-show para ocultarse en el formulario Solución 1. En este momento, puede cambiar el v-
if
del página a v-show o v-show. Cambie v-if e intente ver si puede resolver el problema de la confusión de la marca de verificación requerida. Puede deberse al mecanismo de representación de v-if y v-show ( En Vue, podemos usar v-if y v-show para controlar la representación de elementos o plantillas. Y v-if y v-show también pertenecen a las instrucciones internas de uso común de Vue (renderización condicional). Las instrucciones mencionadas aquí son directivas, que se refieren a comandos especiales con un prefijo v-, instrucciones El valor de está limitado a una expresión vinculante, y la responsabilidad de la instrucción es aplicar algún comportamiento especial al DOM cuando el valor de la expresión cambia. v-if genera o elimina a en el DOM de acuerdo con el valor de la expresión elemento verdadero o falso (o elementos múltiples), donde v-if depende del nodo DOM de control y v-show depende del atributo de visualización del nodo DOM de control. el valor pasado por v-show es verdadero, el valor de visualización del elemento DOM correspondiente es bloque o similar, y viceversa, cuando es falso, el valor de visualización es ninguno, es decir, el usuario no puede ver el visualización del elemento, pero su elemento DOM aún existe).
1. Continúe usando v-if \ v-show para controlar la ocultación de componentes, cancele la verificación requerida en reglas fijas o vincule reglas al elemento de formulario y vincule algunas verificaciones no públicas directamente al formulario In -item. la vinculación de verificación no se realiza a través de las reglas de from.