vue+elementUI实现表单和图片上传及验证功能示例

2020-06-16 05:57:10易采站长站整理

],
age: [
{ required: true, message: '必填项', trigger: 'blur' },
{ validator: checkNumber, trigger: 'blur' }
],
sex: [
{ required: true, message: '必填项', trigger: ['blur', 'change'] }
],
nationlity: [
{ required: true, message: '必填项', trigger: ['blur', 'change'] }
],
userType: [
{ required: true, message: '必填项', trigger: ['blur', 'change'] }
],
idCard: [
{ required: true, message: '必填项', trigger: 'blur' },
{ validator: checkIdCard, trigger: 'blur' }
],
registered: [
{ required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] }
],
registeredDetails: [
{ required: true, message: '必填项', trigger: 'blur' }
],
domicile: [
{ required: true, type: 'array', message: '必填项', trigger: ['blur', 'change'] }
],
domicileDetails: [
{ required: true, message: '必填项', trigger: 'blur' }
],
file: [
{ required: true, message: '请上传图片' }
],
plateNumber: [
{ validator: checkPlateNum, trigger: 'change' }
] }
}
},
created () {
this.getKeyPersonType()
},
methods: {
handleChange (value) {
},
// 获取重点人员类型
getKeyPersonType: function () {
let that = this
let param = {
typeCodes: 'userType'
}
axiosMap.getKeyPersonType(param)
.then(res => {
if (res.data.code === 200) {
that.keyPersonType = res.data.rows['0'].userType
that.keyPersonType.forEach(function (item) {
if (that.addKeyPersonForm.userType === item.dataValue) {
that.addKeyPersonForm.userType = item.dataKey
}
})
// that.keyPersonType.unshift({dataValue: '全部', dataKey: ''})
} else {
that.$message.error({
message: res.data.message
})
}
})
},
// 添加控制人员
addPerson (person) {
this.addKeyPersonForm.controller.push(person)
},
// 添加经纬度
addPosition (position) {
this.addKeyPersonForm.longitude = position[0] this.addKeyPersonForm.latitude = position[1] this.showPosition = false
},
// 删除某个控制人员
deleteRow (index) {
this.addKeyPersonForm.controller.splice(this.addKeyPersonForm.controller[index], 1)
},
// 关闭新增控制人员
closeFun () {
this.$refs.addForm.$refs.controlForm.resetFields()
this.innerVisible = false
},
// 关闭经纬度
closePosition () {
// this.$refs.addPosition.$refs.addPosition.resetFields()
this.showPosition = false
},
// 图片预览
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url