<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
labelPosition="top"
:inline="true"
class="demo-ruleForm"
>
<el-row :gutter="">
<el-col :span="">
<el-form-item :label="$t('joinUs.surname')" prop="surname">
<el-input class="edit-input" v-model="ruleForm.surname"></el-input>
</el-form-item>
</el-col>
<el-col :span="">
<el-form-item :label="$t('joinUs.givenName')" prop="givenName">
<el-input class="edit-input" v-model="ruleForm.givenName"></el-input>
</el-form-item>
</el-col>
</el-row> <el-row :gutter="">
<el-col :span="">
<el-form-item :label="$t('joinUs.email')" prop="email">
<el-input class="edit-input" v-model="ruleForm.email"></el-input>
</el-form-item>
</el-col>
<el-col :span="">
<el-form-item :label="$t('joinUs.phone')" prop="phoneNumber" required>
<el-row class="edit-tel">
<el-col :span="">
<el-input class="edit-tel1" v-model="phone1"></el-input>
</el-col>
<el-col class="line" :span="">—</el-col>
<el-col :span="">
<el-input class="edit-tel2" v-model="phone2"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
需求：
必填：
surname givenName email phoneNumber
正则：
surname 只允许输入英文
givenName 只允许输入中文
phoneNumber 只允许输入1-20个数字，
email 邮箱
data () {
return {
ruleForm: {
surname: "",
givenName: "",
email: "",
phoneNumber: ""
}
phone1: "",
phone2: ""
}
}
由于国际化问题，切换时在 data 中不起作用，需要将表达式放到 computed 属性中
computed: {
rules () {
var validateSurnmae = (rule, value, callback) => {
let reg = /^[A-Za-z]+$/
if (!reg.test(value)) {
callback(new Error(this.$t('joinUs.surnameErr3')))
} else {
callback()
}
};
var validateGivenName = (rule, value, callback) => {
let reg = /^[\u4e00-\u9fa5]+$/
if (!reg.test(value)) {
callback(new Error(this.$t('joinUs.givenNameErr3')))
} else {
callback()
}
};return {
surname: [
{ required: true, message: this.$t('joinUs.surnameErr1'), trigger: "blur" },
{ validator: validateSurnmae, trigger: "blur" },
{ min: , max: 2, message: this.$t('joinUs.surnameErr2'), trigger: "blur" }
],
givenName: [
{ required: true, message: this.$t('joinUs.givenNameErr1'), trigger: "blur" },
{ validator: validateGivenName, trigger: "blur" },
{ min: , max: 2, message: this.$t('joinUs.givenNameErr2'), trigger: "blur" }
]
email: [
{ required: true, message: this.$t('joinUs.emailError'), trigger: "blur" },
{
type: "email",
message: this.$t('joinUs.emailError'),
trigger: ["blur", "change"]
}
],
phoneNumber: [
{ required: true, message: this.$t('joinUs.phoneNumberError1'), trigger: "blur" },
{ type: 'number', message: this.$t('joinUs.phoneNumberError2'), trigger: "blur" }
]
}
}
}
因为项目需要，现在的 tel 电话 是加区号的
所以写成了上面那种形式，
两个框的单独的，然后用watch监听输入框，把两个框的内容拼接
watch: {
'phone1': function (val) {
this.ruleForm.phoneNumber = parseInt(val + this.phone2)
},
'phone2': function (val) {
this.ruleForm.phoneNumber = parseInt(this.phone1 + val)
}
},
这样就得到了总的电话号码。然后去给总的号码添加校验规则
OK！