elementUI表单验证失效解决办法

最新推荐文章于 2024-06-20 15:19:29 发布

我来秋风扫落叶

最新推荐文章于 2024-06-20 15:19:29 发布

阅读量1.8k

点赞数

分类专栏： Web前端文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_15038701/article/details/124527476

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue.js应用中实现表单验证和提交。使用`el-form`组件，结合`:model`, `:rules`属性进行数据绑定和验证规则设置。`ref`用于引用表单，`@click`事件监听提交按钮，调用`submitForm`方法进行表单验证。如果验证通过，则执行相应操作，否则阻止表单提交。

摘要由CSDN通过智能技术生成

<el-form :model="signForm" status-icon :rules="formRule" ref="signForm" label-width="100px">
</el-form>

formRule验证规则为：

formRule: {
         sign_name: [
        {required: true, message: '请输入签到名称', trigger: 'blur'}
                    ]
         }

:model="signForm" status-icon :rules="formRule" ref="signForm"

提交按钮在el-form之内

绑定事件的方式为： @click="submitForm('signForm')"

 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                    //验证通过  
              } else {
                return false;
             }
       });
 }