element-ui表单验证例子：validateField验证部分表单

最新推荐文章于 2024-03-18 23:04:35 发布

弗兰克的天空

最新推荐文章于 2024-03-18 23:04:35 发布

阅读量3.2w

点赞数 5

分类专栏：网站前端 vue elementUI

本文链接：https://blog.csdn.net/frank_fong/article/details/98486989

版权

网站前端同时被 3 个专栏收录

75 篇文章 1 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

elementUI

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elementUI</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="myModel" :rules="rules" ref="myForm" size="small" label-width="100px">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="myModel.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="myModel.email" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" size="medium" @click="validateEmail('myForm')">验证字段</el-button>
                <el-button type="primary" size="medium" @click="submitForm('myForm')">验证全部</el-button>
            </el-form-item>
        </el-form>


    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                myModel: {
                    name: '',
                    email: ''
                },
                rules: {
                    name: {
                        required: true,
                        message: '请输入姓名',
                        trigger: ['change', 'blur']
                    },
                    email: {
                        required: true,
                        message: '请输入邮箱',
                        trigger: ['change', 'blur']
                    }
                }
            },
            methods: {
                validateEmail(formName) {
                    this.$refs[formName].validateField('email', emailError => {
                        if (!emailError) {
                            alert('邮箱验证通过!');
                        } else {
                            console.log('邮箱验证失败');
                            return false;
                        }
                    });

                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            }
        })
    </script>
</body>

</html>

弗兰克的天空

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
element-ui表单验证例子：validateField验证部分表单

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫