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  
}