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