ruoyi框架如何添加表单验证

最新推荐文章于 2024-09-24 10:50:41 发布

进击的小良

最新推荐文章于 2024-09-24 10:50:41 发布

阅读量274

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/dlzzld/article/details/142331766

版权

<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-form-item label="规格" prop="specification">
             <el-input v-model="form.specification" placeholder="请输入规格"/>
        </el-form-item>
        <el-form-item label="钢种" prop="steelGrade">
             <el-input v-model="form.steelGrade" placeholder="请输入钢种"/>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
</el-dialog>

data() {
  return {           
    rules: {
       specification: [{required: true, message: '规格不能为空', trigger: 'blur'}],
        steelGrade: [{required: true, message: '钢种不能为空', trigger: 'blur'}],
           }
         }
       },

methods:{
        submitForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                        console.log("验证通过！")
                    } else {
                        console.log("验证不通过！")
                    }
                }
            })
        },
}

在<el-form>标签中添加 :rules="rules"，意味着这个表单的验证规则被绑定到rules上，

在<el-form-item>标签中添加 prop="specification"，将<el-form-item>组件与rules中的 specification字段规则关联起来

rules中添加自己想验证的规则，

最后在表单提交的方法中添加：this.$refs['form'].validate(valid => { .... })来验证规则是否符合，这里的“form”与<el-form>标签中的ref="form"相关联。