element-ui表单通过后台接口自定义校验

有个需求,用户输入工号之后,需要判断该机构下是否存在这个工号,如果不存在,则提示,否则通过,可以提交表单

element-ui表单通过后台接口自定义校验_第1张图片

       data(){
            let _this = this
            var validateUserNumber = (rule, value, callback)=>{
                if(value == ''){
                    callback(new Error('请输入被分享人的工号'));
                } else if (value !== ''){
                    // 当用户输入工号时,判断用户输入工号是否合法
                    let flag = false
                    let obj = {
                        currentPage: 0,
                        pageSize: 100,
                        tenantId: _this.targetInfo.tenantId,
                        workNo:value
                    }
                    _this.$request("GET", "/authorizeservice/api/userList", obj).then(res=>{
                        console.log(res,'是否能正常返回')
                        if(res.data.item.list == 0){
                            callback(new Error('输入的工号不在该租户下,请核对工号'));
                        } else if(res.data.item.list.length > 0){
                            res.data.item.list.forEach(item=>{
                                if(item.workNo === value){
                                    flag = true
                                }
                            })
                            if(!flag){
                                callback(new Error('输入的工号不在该租户下,请核对工号'));
                            } else {
                                callback();
                            }
                        }
                    })
                    
                }else {
                    callback();
                }
            }
            return {
                dialogVisible:false ,
                targetInfo:{
                    orgCode:'',
                    tenantId:'',
                    userNumber:'',
                },
                rules: {
                    orgCode: [
                        { required: true, message: '请选择共享资源的接收节点', trigger: 'change ' },
                    ],
                    tenantId: [
                        { required: true, message: '请选择共享资源的接受租户', trigger: 'change' }
                    ],
                    userNumber: [
                        { validator: validateUserNumber, trigger: 'blur' }
                    ]
                }
            }
        },

你可能感兴趣的:(ui,javascript,vue.js,elementui)