form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" labelPosition="top" :inline="true" class="demo-ruleForm" > "59"> "12"> item :label="$t('joinUs.surname')" prop="surname"> input class="edit-input" v-model="ruleForm.surname"> "12"> item :label="$t('joinUs.givenName')" prop="givenName"> input class="edit-input" v-model="ruleForm.givenName"> "59"> "12"> item :label="$t('joinUs.email')" prop="email"> input class="edit-input" v-model="ruleForm.email"> "12"> item :label="$t('joinUs.phone')" prop="phoneNumber" required> class="edit-tel"> "8"> input class="edit-tel1" v-model="phone1"> col class="line" :span="2">— "14"> input class="edit-tel2" v-model="phone2">
需求:
必填:
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: 1, max: 20, message: this.$t('joinUs.surnameErr2'), trigger: "blur" } ], givenName: [ { required: true, message: this.$t('joinUs.givenNameErr1'), trigger: "blur" }, { validator: validateGivenName, trigger: "blur" }, { min: 1, max: 20, 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!