vue 表單驗證由異步變更為同步

寫前端項目時vue表單驗證突然變成異步了，導致如果獲取校驗函數的返回值，應該是升級iview組件導致的，這里記錄一下改為同步的一種寫法

實現功能：表單中進行規則設置，當觸發提交或者流程中的下一頁時觸發這些規則校驗

表單

<Form ref="businessInfo" :model="businessInfo" :rules="businessInfoRule" :label-width="120">
    <Row>
                            <Col span="8">
                                <Col span="22">
                                    <FormItem label="業務信息：" prop="objectInfo">
                                        <!-- {{sendData.busnissMsg}} -->
                                        <Input v-model="businessInfo.objectInfo" placeholder="具體使用集群的業務名稱"></Input>
                                    </FormItem>
                                </Col>
                            </Col>
                            <Col span="8">
                                <Col span="22">
                                    <FormItem label="OP：" prop="op">
                                        <Input v-model="businessInfo.op" placeholder="產品線OP"></Input>
                                    </FormItem>
                                </Col>
                            </Col>
                            <Col span="8">
                                <Col span="22">
                                    <FormItem label="項目郵件組：" prop="mailGroup">
                                        <Input v-model="businessInfo.mailGroup" placeholder="郵箱地址"></Input>
                                    </FormItem>
                                </Col>
                            </Col>
    </Row>  
</Form>

規則在data中設置

• 子key的名字和上述表單子項的prop設置的名字要一樣

businessInfoRule:{
                op:[
                    {required:true,message: '請填寫業務op',trigger: 'change'}
                ],
                mailGroup:[
                    {required:true,type:'email',message: '請正確填寫郵箱信息',trigger: 'change'},
                ],
                note:[
                    {required:true,message: '請填寫業務用途',trigger: 'change'},
                    {max:30,message: '請限制在30個字范圍內',trigger: 'change'}
                ],
                objectInfo:[
                    {required:true,message: '請填寫業務信息',trigger: 'change'},
                ]
            },

規則校驗的函數以及調用函數

• Promise是內置的函數

• this.checkForm().then(res=> 這里的res是checkForm函數返回的結果集

• 通過Promis和this.checkForm().then(res=>這種調用方法實現同步調用，即當checkForm執行完畢后才會進入下一邏輯

checkForm(){
            return new Promise((resolve, reject) => {
                this.$refs['businessInfo'].validate((valid) => {
                    console.log('inner')
                    console.log(valid)
                    if (valid) {
                        resolve(true)
                    } else {
                        this.$Message.error('請檢查業務及歸屬信息');
                        checkResult = false
                        resolve(false)
                    }
                })
            })
},
changeCrrentPage(){
    this.checkForm().then(res=>{
                        if (res){
                            console.log(res)
                            this.defaultPage = page;
                            this.$refs.flowApply.changePage(page)
                        }
                    })
    break  
}

錯誤的寫法

• 以前均是采用此中方法進行校驗，但是升級了iview組件之后此方法不在生效，在調用checkForm函數時其變為了異步方式，即if(this.checkForm()) 這里的返回時undefined

checkForm(){
            return new Promise((resolve, reject) => {
                this.$refs['businessInfo'].validate((valid) => {
                    console.log('inner')
                    console.log(valid)
                    if (valid) {
                        return(true)
                    } else {
                        this.$Message.error('請檢查業務及歸屬信息');
                        return false
                    }
                })
            })
},
changeCrrentPage(){
    if (this.checkForm()) {
                        this.defaultPage = page;
                        this.$refs.flowApply.changePage(page)
                    }
    break  
}