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

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

<el-dialog
width="5.1rem"
title="选择经纬度"
v-if="showPosition"
:visible.sync="showPosition"
append-to-body
:before-close="closePosition">
<personnel-add-position ref="addPosition" @add-position="addPosition" :position-form1="positionForm"></personnel-add-position>
</el-dialog>
<!--选择经纬度弹框------------------结束-->
</div>
</template>


<script>
import options from '../../../static/js/country-data.js'
import PersonnelControlAdd from './PersonnelControlAdd.vue'
import axiosMap from './../../api/map'
import axiosControl from './../../api/control'
import PersonnelAddPosition from './PersonnelAddPosition.vue'
export default {
components: {
PersonnelAddPosition,
PersonnelControlAdd},
name: 'add-keyperson-dialog',
props: {
dialogType: {
type: String
},
keypersonList: {
type: Object
}
},
computed: {
position: { // 经纬度
// getter
get: function () {
let str = ''
if (this.addKeyPersonForm.longitude !== '' && this.addKeyPersonForm.latitude !== '' && this.addKeyPersonForm.longitude !== null && this.addKeyPersonForm.latitude !== null) {
str = this.addKeyPersonForm.longitude + ',' + this.addKeyPersonForm.latitude
}
return str
},
// setter
set: function (newValue) {
}
}
},
/* watch: {
keypersonList: { // 深度监听,可监听到对象、数组的变化
handler (newQuestion, oldQuestion) {
this.addKeyPersonForm = Object.assign({}, this.keypersonList)
this.dialogImageUrl = Object.assign({}, this.keypersonList).iconUrl
},
deep: true
}
}, */
data () {
var checkNumber = (rule, value, callback) => {
let regEn = /^[1-9]d*$/
if (!regEn.test(value)) {
callback(new Error('正整数'))
} else {
callback()
}
}
var checkIdCard = (rule, value, callback) => {
let regEn = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/
if (!regEn.test(value)) {
callback(new Error('请输入正确身份证'))
} else {
// 校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10
// 下面分别分析出生日期和校验位
let num = value.toUpperCase()
let len, re
len = num.length
if (len === 15) {
re = new RegExp(/^(d{6})(d{2})(d{2})(d{2})(d{3})$/)
let arrSplit = num.match(re) // 检查生日日期是否正确
let dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
let bGoodDay
bGoodDay = (dtmBirth.getYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))