<template>
|
<el-form-item :label="label" :prop="prop" :rules="itemRules">
|
<slot></slot>
|
</el-form-item>
|
</template>
|
<script>
|
|
export default {
|
name: 'ZtFormItem',
|
props: {
|
label: String,
|
prop: {
|
type: String,
|
required: true
|
},
|
rules: String
|
},
|
data() {
|
return {
|
itemRules: []
|
}
|
},
|
mounted() {
|
let itemRules = this.itemRules
|
if (!this.rules) {
|
return
|
}
|
let rules = this.rules.split('|')
|
rules.forEach(rule => {
|
let arr = rule.split(':')
|
let ruleName = arr[0]
|
if (ruleName === 'required') {
|
itemRules.push({required: true, message: this.$t('validate.required2', {label: this.label}), trigger: 'blur'})
|
} else if (ruleName === 'min') {
|
itemRules.push({min: parseInt(arr[1]), message: this.$t('validate.min', {min: arr[1]}), trigger: 'blur'})
|
} else if (ruleName === 'max') {
|
itemRules.push({max: parseInt(arr[1]), message: this.$t('validate.max', {max: arr[1]}), trigger: 'blur'})
|
} else if (ruleName === 'minmax' && arr[1].indexOf(',') > 0) {
|
let param = arr[1].split(',')
|
itemRules.push({min: parseInt(param[0]), max: parseInt(param[1]), message: this.$t('validate.minmax', {min: param[0], max: param[1]}), trigger: 'blur'})
|
} else if (ruleName === 'email') {
|
itemRules.push({type: 'email', message: this.$t('validate.format', {attr: 'email'}), trigger: 'blur'})
|
} else if (ruleName === 'url') {
|
itemRules.push({type: 'url', message: this.$t('validate.format', {attr: 'url'}), trigger: 'blur'})
|
} else {
|
/* eslint-disable */
|
itemRules.push({validator: (rule, value, callback) => {
|
let pattern = ''
|
let message = ''
|
if (ruleName === 'integer') {
|
pattern = /^[+]?[1-9]+\d*$/i
|
message = '请输入整数'
|
} else if (ruleName === 'double') {
|
pattern = /^[0-9]+\.{0,1}[0-9]+$/i
|
message = '请输入小数'
|
} else if (ruleName === 'phone') {
|
pattern = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
|
message = '格式不正确,请使用下面格式:010-88888888'
|
} else if (ruleName === 'mobile') {
|
pattern = /^1[\d]{10}/i
|
message = '手机号码格式不正确'
|
} else if (ruleName === 'chinese') {
|
pattern = /^[\u0391-\uFFE5]+$/i
|
message = '请输入中文'
|
} else if (ruleName === 'english') {
|
pattern = /^[A-Za-z]+$/i
|
message = '请输入英文'
|
} else if (ruleName === 'username') {
|
pattern = /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i
|
message = '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'
|
} else if (ruleName === 'name') {
|
pattern = /^[\u4e00-\u9fa5a-zA-Z]+[\u4e00-\u9fa5a-zA-Z0-9_]+$/
|
message = (this.label + '格式不正确')
|
} else if (ruleName === 'email') {
|
pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
|
message = '请输入有效的电子邮件账号(例：abc@163.com)'
|
} else if (ruleName === 'version') {
|
pattern = /^\d+(\.\d+){0,2}$/
|
message = '请输入有效的版本号(例:1.3.2)'
|
} else if (ruleName === 'version') {
|
pattern = /^([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])$/
|
message = '请输入有效的ip地址'
|
} else if (ruleName === 'reg') {
|
pattern = arr[1]
|
message = this.$t('validate.format')
|
}
|
if (ruleName === 'reg' && arr.length > 2) {
|
message = arr[2]
|
} else if (arr.length > 1) {
|
message = arr[1]
|
}
|
if (!pattern.test(value)) {
|
callback(new Error(message))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'})
|
/* eslint-disable */
|
}
|
})
|
},
|
methods: {
|
}
|
}
|
</script>
|
