vue表单单独对一个字段验证

最新推荐文章于 2024-08-10 11:51:29 发布

friend_ship

最新推荐文章于 2024-08-10 11:51:29 发布

阅读量8.5k

点赞数 3

分类专栏： Vue 文章标签： vue.js vue 表单对某一字段单独验证

本文链接：https://blog.csdn.net/friend_ship/article/details/106420512

版权

Vue 专栏收录该内容

42 篇文章 4 订阅

订阅专栏

以普通表单创建为例，代码如下：

<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form>
            <el-form-item label="名称" prop="name">
                <el-input v-model.trim="form.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="des">
                <el-input type="textarea" v-model.trim="form.des" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="create('form')">创建</el-button>
                <el-button @click="cancel('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                form: {
                    name:'',
                    des: ''
                },
                rules: {
                    name: [{required: true, message: '请输入名称', trigger: ['blur', 'change']}]
                }
            }
        },
        methods: {
            // 创建表单验证
            create(formName) {
                this.$refs[formName].validateField('name', valid => {
                    if(valid) {
                        // 表单验证通过
                    }
                })
            },
            // 重置表单
            cancel(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

普通表单验证，如登录表单，请查看这里

多表单验证，请查看这里