<el-form :model="orderaddForm" :rules="rulesPhone" ref="orderaddForm" label-width="100px" class="oncall_mesgbox clearfix">
<el-form-item label="联系人电话" prop="new_phone">
<el-input type="text" autocomplete="off" v-model="orderaddForm.contactTelephone"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogaddorder = false">取消</el-button>
<el-button type="primary" @click="submitaddWorkOrderForm('orderaddForm')">提交</el-button>
</div>
注意:
按钮绑定form-:对应model
输入框el-input (v-model):对应form-model.某名称,自定
vue验证:
data() {
//电话验证
const validatePhone = (rule, value, callback) => {//定义规则
let reg = /^1[345789]\d{9}$/;
if (value != '' && reg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的手机号'))
}
}
return {
rulesPhone: {//电话验证-对应form-:rules
new_phone:[{//对应item-prop
validator: validatePhone,//对应上方规则
trigger: 'change'//修改验证
}]
},
}
延伸:
data form内的字段都要(必须)定义:
data() {
return {
orderaddForm:{//form名称一般弹出框
contactTelephone:'',
},
}
}
延伸:
引用函数:
this. functionName()