当手机号中的值为123验证码必填。
手机号为非123的值非必填。
代码示例：
<template>
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="手机号" prop="phone">
<el-input autocomplete="on" name="phone" v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code"
:rules="{
required: ruleForm.phone=='123'?true:false, message: '不能为空', trigger: 'change'
}">
<el-select
v-model="ruleForm.code"
multiple
filterable
allow-create
default-first-option
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
options: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
ruleForm: {
phone: '',
code: ''
},
rules: {
phone: [
{ required: true, trigger: 'blur', message: '手机号不能为空' }
]
}
}
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
方法2：
虽然实现当手机号为123出现必填项符号，但是却无法进行非空验证
<el-form-item label="验证码" :prop="ruleForm.phone == '123' ? 'code':''">
<el-select
v-model="ruleForm.code"
multiple
filterable
allow-create
default-first-option
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>