zoukankan      html  css  js  c++  java
  • vue+Element表单的校验方式

    一、单个添加校验

      这种方式适合校验个别字段,或者表单字段有改变的校验。

    <template>
        <div>
            <el-form :model="model">
                <el-form-item label="姓名:" prop="name" :rules="[{required:true,message:'请输入姓名',trigger:'blur'}]">
                    <el-input v-model="model.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    <script>
        export default {
            name: "Test",
            data() {
                return {
                    model: {
                        name: "",
                    }
                }
            },
        }
    </script>

    二、通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名

      代码如下所示:

    <template>
        <div>
            <el-form :model="model" :rules="rules">
                <el-form-item label="姓名:" prop="name">
                    <el-input v-model="model.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    <script>
        export default {
            name: "Test",
            data() {
                return {
                    model: {
                        name: "",
                    },
                    rules: {
                        name: [{required: true, message: '请输入姓名', trigger: 'blur'}]
                    }
                }
            },
        }
    </script>

    三、动态表单校验

      动态表单校验,需要在单个的表单域上传递属性的验证,示例代码如下所示:

    <template>
        <div>
            <el-form :model="model">
                <el-form-item
                        v-for="(item, index) in model.name"
                        :label="'名字' + index"
                        :key="item.key"
                        :prop="'name.' + index + '.value'"
                        :rules="{required: true, message: '请输入姓名', trigger: 'blur'}"
                >
                    <el-input v-model="item.value"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </template>
    
    <script>
        export default {
            name: "Test",
            data() {
                return {
                    model: {
                        name: [{value: ""}, {value: ""}],
                    }
                }
            },
        }
    </script>

      效果如下图所示:

    四、多个表单的校验

       校验多个表单的思路是:所有单个表单的校验结果返回一个promise,将所有的promise放入一个数组,使用promise.all进行校验。

       代码如下所示:

    <template>
        <div>
            <el-form :model="model1" ref="form1">
                <el-form-item label="姓名:" prop="name" :rules="[{required:true,message:'请输入姓名',trigger:'blur'}]">
                    <el-input v-model="model1.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="model2" ref="form2">
                <el-form-item label="性别:" prop="gender" :rules="[{required:true,message:'请输入性别',trigger:'blur'}]">
                    <el-input v-model="model2.gender" placeholder="请输入性别" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="model3" ref="form3">
                <el-form-item label="年龄:" prop="age" :rules="[{required:true,message:'请输入年龄',trigger:'blur'}]">
                    <el-input v-model="model3.age" placeholder="请输入年龄" clearable></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="submit">点击校验</el-button>
        </div>
    </template>
    
    <script>
        export default {
            name: "Test",
            data() {
                return {
                    model1: {
                        name: "",
                    },
                    model2: {
                        gender: "",
                    },
                    model3: {
                        age: "",
                    }
                }
            },
            methods: {
                submit() {
                    let list = [];
                    list.push(
                        this.checkForm("form1"),
                        this.checkForm("form2"),
                        this.checkForm("form3"));
                    Promise.all(list)
                        .then(() => {
                            console.log("通过检测");
                        })
                        .catch(() => {
                            console.log("未通过");
                        });
                },
                //检查表单是否校验通过,返回Promise
                checkForm(formName) {
                    return new Promise((resolve, reject) => {
                        this.$refs[formName].validate(valid => {
                            if (valid) {
                                resolve();
                            } else reject();
                        });
                    });
                }
            }
        }
    </script>
  • 相关阅读:
    Redis学习笔记(十四)Sentinel(哨兵)(上)
    Redis学习笔记(十三) 复制(下)
    Redis学习笔记(十二) 复制(上)
    搞懂推荐系统中的评价指标NDCG(CG、DCG、IDCG)
    pytorch入门3.2构建分类模型再体验(批处理)
    pytorch入门3.1构建分类模型再体验(模型和训练)
    pytorch入门3.0构建分类模型再体验(准备数据)
    一条一条的读《推荐系统实战》2.0
    pytorch入门2.2构建回归模型初体验(开始训练)
    pytorch入门2.1构建回归模型初体验(模型构建)
  • 原文地址:https://www.cnblogs.com/gg-qq/p/13932623.html
Copyright © 2011-2022 走看看