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="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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
禁止转载，如需转载请通过简信或评论联系作者。

相关阅读更多精彩内容

友情链接更多精彩内容