Elment-UI 的 Form 组件提供了表单验证的功能：
1.将 Form-Item 的 prop 属性设置为需校验的字段名
2.通过 rules 属性传入约定的验证规则
rules: {
name: [
{
required: true, //非空校验
message: '提示信息', //校验提示信息
trigger: 'blur'//触发条件：blur、change
}
]
踩坑：
1.要验证输入只能为数字时
{type:'number',message:'只能为数字'}
必须要在v-model后面加上.number,即v-moder.number。这里的验证会将你输入的value格式化为number值，在你做自定义校验的时候，要格外注意，有可能正则表达式没有起到效果，就是因为它自动给你转化格式了
2.自定义校验
必须要有回调，否则表单无法提交。
data() {
var newReg1 = (rule, value, callback) => {
if (value < 0) {
callback(new Error("不能为负数"));
} else {
callback(); //必须要有回调，要不然表单无法提交
}
};
var newReg2 = (rule, value, callback) => {
let pattrn = /^((?!0)\d+(\.\d{1,2})?)$/g
if (!pattrn.test(value)) {
callback(new Error("不能为负数"));
} else {
callback();
}
};
return {
amountCheck: [
{ validator: newReg1, trigger: "blur" },
{ validator: newReg2, trigger: "blur" },
//此处可写多个校验方法
......
]
};
}
3.数据绑定
做表单验证时
不同类型的表单校验
1.普通输入验证
rules: { // 表单验证规则
name: [
{ required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
{ min: 3, max: 5, message: '长度在 3 到 5 个字符' }
]
}
2.数字类型验证
area: [
// 数字类型 'number', 整数: 'integer', 浮点数: 'float'
// {type: 'number', message: '请输入数字类型', trigger: 'blur'},
// {type: 'integer', message: '请输入数字类型', trigger: 'change'}, // 'change'是表单的值改变的时候会触发验证
{required: true, message: '请输入区域面积', trigger: 'blur'}
],
// 自己写的正则验证,限制用户输入数字以外的字符
// 过滤输入的金额
InputNumber (property) {
this.registData[property] = this.limitInputPointNumber(this.registData[property])
},
// 验证只能输入数字
limitInputNumber (val) {
if (val) {
return String(val).replace(/\D/g, '')
}
return val
},
// 限制只能输入数字(可以输入两位小数)
limitInputPointNumber (val) {
if (val === 0 || val === '0' || val === '') {
return ''
} else {
let value = null
value = String(val).replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
return Number(value)
}
},
3.1 嵌套验证(独立验证)
这种情况是一行里有多个输入框或选择的情况,这里有两种方法,第一种是el-form嵌套写法,验证是独立的
image
image
-
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
3.2 嵌套验证(联动验证)
这种是联动验证,适用省级联动场景,先选国家后触发城市验证
image
image
region: [
{
type: 'object',
required: true,
// 这里有两种处理,一种是自定义验证,拿到值后自己对属性进行验证,比较麻烦
// validator: (rule, value, callback) => {
// console.log(55, value)
// if (!value.country) {
// callback(new Error('请选择国家'))
// } else if (!value.city) {
// callback(new Error('请选择城市'))
// } else {
// callback()
// }
// },
trigger: 'change',
// 官网提供了对象的嵌套验证,只需要把需要验证的属性,放在fields对象里,就会按顺序进行验证
fields: {
country: {required: true, message: '请选择国家', trigger: 'blur'},
city: {required: true, message: '请选择城市', trigger: 'blur'}
}
}
],
4.图片上传验证(手动触发部分验证方法)
有时候会需要在表单里上传图片,但是图片上传是一个异步过程,属性值改变后不会去触发验证规则
image.png
文件上传后，不会触发form表单的验证，需要手动调用校验方法。
fileUrl: [
{ required: true, message: '请上传图片', trigger: 'change' }
],
// 删除图片
handleRemove (file, fileList) {
this.registData.fileUrl = ''
// 文件删除后也要触发验证,validateField是触发部分验证的方法,参数是prop设置的值
this.$refs.registerRef.validateField('fileUrl')
},
// 图片上传
handleSuccess (res, file, fileList) {
// 这里可以写文件上传成功后的处理,但是一定要记得给fileUrl赋值
this.registData.fileUrl = 'fileUrl'
// 文件上传后不会触发form表单的验证,要手动添加验证
this.$refs.registerRef.validateField('fileUrl')
},
表单校验示例：（包含自定义校验）
完整代码：
shopInfo
-
立即创建
重置