vue 验证电话

<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()