Vue之表单提交校验组件

怼烎@ 2022-12-04 11:00 241阅读 0赞

仿element实现表单提交校验组件  
form组件

<template>
        <div>
            <form>
                <slot></slot>
            </form>
        </div>
    </template>
    
    <script>
        export default { 
            provide(){ 
                return { 
                    form: this
                }
            },
            props:{ 
                model: { 
                    type: Object,
                    required: true
                },
                rules: { 
                    type: Object
                }
            },
            methods:{ 
                validate(cb){ 
                    const tasks = this.$children.filter(item=>item.prop).map(item=>item.validate())
                    Promise.all(tasks).then(()=>cb(true)).catch(()=>cb(false))
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

form-item组件

<template>
        <div>
            <label v-if="label">{ { label}}</label>
            <slot></slot>
            <p v-if="error">{ { error}}</p>
        </div>
    </template>
    
    <script>
        import Shema from 'async-validator';
        export default { 
            inject:['form'],
            props:{ 
                label:{ 
                    type:String,
                    default:""
                },
                prop:{ 
                    type:String,
                    default:""
                }
            },
            data() { 
                return { 
                    error: ""//校验错误
                }
            },
            mounted () { 
                this.$on('validate',()=>{ 
                    this.validate()
                });
            },
            methods: { 
                validate() { 
                    const rules = this.form.rules[this.prop]
                    const value = this.form.model[this.prop]
                    const descriptor = new Shema({ [this.prop]:rules})
                    return descriptor.validate({ [this.prop]:value},errors=>{ 
                        if(errors){ 
                            this.error = errors[0].message
                        }else{ 
                            this.error = ""
                        }
                    })
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

input组件

```coffeescript
    <template>
        <div>
            <input :value="value" @input="onInput">
        </div>
    </template>
    
    <script>
        export default { 
            props:{ 
                value:{ 
                    type:String,
                    default:""
                }
            },
            methods: { 
                onInput(e) { 
                    this.$emit("input",e.target.value)
                    this.$parent.$emit('validate')
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

项目内使用

<template>
        <div>
            <k-form :model="user" :rules="rules" ref="loginForm">
                <k-form-item label="用户名" prop="username">
                    <k-input type="text" v-model="user.username"></k-input>
                </k-form-item>
                <k-form-item label="密码" prop="password">
                    <k-input type="password" v-model="user.password"></k-input>
                </k-form-item>
                <k-form-item>
                    <button @click="submitForm">提交</button>
                </k-form-item>
            </k-form>
            
        </div>
    </template>
    
    <script>
        import KForm from '@/components/form/KForm.vue'
        import KFormItem from '@/components/form/KFormItem.vue'
        import KInput from '@/components/form/KInput.vue'
        export default { 
            components: { 
                KForm,
                KInput,
                KFormItem
            },
            data() { 
                return { 
                    user: { 
                        username:"aaa",
                        password:""
                    },
                    rules: { 
                        username: [{  required: true, message: "请输入用户名称" }],
                        password: [{  required: true, message: "请输入密码" }]
                    }
                }
            },
            methods: { 
                submitForm() { 
                    this.$refs.loginForm.validate(valid=>{ 
                        if(valid){ 
                            alert("请求登录")
                        }else{ 
                            alert("校验失败")
                        }
                    })   
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

效果展示  
![在这里插入图片描述][20200908080847711.png_pic_center]

[20200908080847711.png_pic_center]: /images/20221123/3559e5f4d1d94073bdd3a64a2cb8bd1e.png