Vue+ElementUi表单验证，提交表单时，焦点定位到第一个校验不通过处并给予提示

效果 

 

分析一波

提交表单后，校验不通过的 input 框便会获取获取焦点，class 将会增加 isError ，增加红色边框

解决办法

获取除第一个以外的input 添加动态class 样式 将边框颜色变为黑色

代码

HTML

<!-- 登录/注册 -->
    <div id="loginLayerBox" class="loginLayerBox">
        <el-dialog :visible.sync="isOpen" width="380px" :before-close="handleClose" :lock-scroll="false">
            <el-row>
                <el-col :span="16">
                    <h2 class="title">邮箱快捷登录</h2>
                </el-col>
            </el-row>
            <!-- form 表单 -->
            <el-form ref="emailForm" :model="emailForm" label-width="0" class="loginForm" :rules="emailRules">
                <!-- 邮箱账号 -->
                <el-form-item prop="email">
                    <el-input :class="[
              formMessage.email
                ? 'isNotError loginPhoneInput'
                : 'loginPhoneInput',
            ]" v-model="emailForm.email" placeholder="请输入邮箱账号" ref="email"></el-input>
                </el-form-item>
                <!-- 验证码 -->
                <el-form-item prop="code">
                    <el-input :class="[
              formMessage.code
                ? 'isNotError loginPhoneInput'
                : 'loginPhoneInput',
            ]" v-model="emailForm.code" placeholder="请输入邮箱验证码" ref="code">
                        <el-link slot="suffix" class="inlineTwoInput" :underline="false">获取验证码</el-link>
                    </el-input>
                </el-form-item>
                <el-row v-if="errorMsg != ''" style="
            margin-top: 15px;
            margin-bottom: 10px;
            color: red;
            font-weight: lighter;
            font-size: 12px;
          ">
                    {{ errorMsg }}
                </el-row>
                <!-- 登录按钮 -->
                <el-button class="loginBut" plain @click="submitForm">登录</el-button>
            </el-form>
        </el-dialog>
    </div>

JS

var vm = new Vue({
        el: '#loginLayerBox',
        data() {
            // 自定义表单验证
            var validPassword = (rule, value, callback) => {
                let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
                if (!reg.test(value)) {
                    callback(new Error("密码必须是由8-20位字母+数字组合"));
                } else {
                    callback();
                }
            };
            return {
                // 开启弹窗
                isOpen: true,
                //报错信息
                errorMsg: "",
                //判断是否通过验证
                formMessage: {
                    email: false,
                    code: false,
                },
                // 邮箱快捷登录form表单数据
                emailForm: {
                    email: "",
                    code: "",
                },
                // 表单验证规则
                emailRules: {
                    email: [
                        { required: true, message: "请输入邮箱地址", trigger: "change" },
                        {
                            type: "email",
                            message: "请输入正确的邮箱地址",
                            trigger: ["change"],
                        },
                    ],
                    code: [
                        {
                            required: true,
                            message: "请输入验证码",
                            trigger: ["change"],
                        },
                    ],
                },
            };
        },
        //监视属性
        methods: {
            // 重置表单
            resetForm() {
                this.$refs["emailForm"].resetFields();
                // 错误信息情况
                this.errorMsg = "";
            },
            // 提交表单
            submitForm() {
                // 重置
                (this.formMessage = {
                    email: false,
                    code: false,
                }),
                    //提交表单 //判断是否符合rlue
                    this.$refs.emailForm.validate((valid, error) => {
                        if (valid) {
                            // 重置表单
                            this.resetForm();
                        } else {
                            this.$nextTick(() => {
                                // 获取error列表的 第一个报错信息
                                var a = [];
                                var t = 0;
                                // 获取报错的元素
                                var isError = document.getElementsByClassName("is-error");
                                for (let key in error) {
                                    // // 记录错误的第一个元素
                                    a.push(error[key][0]);
                                    // 判断是不是第一个元素
                                    if (t != 0) {
                                        // 判断是不是input元素
                                        if (
                                            isError.item(t).getElementsByClassName("el-input").length > 0
                                        ) {
                                            // 如果为input 元素 则改变class名字
                                            this.formMessage[key] = true;

                                        }
                                    }
                                    // 递增
                                    t++;
                                }
                                // 赋值给报错信息
                                this.errorMsg = a[0].message;
                            }, 100);
                            return false;
                        }
                    });
            },
            // 关闭弹窗
            handleClose() {
                this.$nextTick(() => {
                    this.resetForm();
                });
                this.isOpen = false;
            },
        },
    })

CSS

在elementUI基础上改

/* 弹窗布局 */
    .loginLayerBox .el-dialog__body {
        padding: 5px 40px 40px 40px;
        text-align: left;
    }

    /* 标题 */
    .title {
        font-size: 20px;
        color: #101D37;
        font-weight: bold;
    }

    /* form表单布局 */
    .loginForm {
        margin-top: 40px;
    }

    .loginForm input {
        width: 300px;
        padding-left: 16px;
        height: 50px;
        line-height: 50px;
        border: 0;
        font-size: 14px;
        border: 1px solid #DBDBDB;
        margin-top: -1px;
        border-radius: 0;
    }

    /* input框下的边距 */
    .loginLayerBox .el-form-item {
        margin-bottom: 0;
    }

    /* 点击input框下的边框 */
    .loginLayerBox .el-input__inner:focus {
        border-color: #DBDBDB;
        outline: 0;
    }

    /* 获取验证码 */
    .loginLayerBox .el-input__suffix .inlineTwoInput {
        top: 18%;
        right: 0;
        margin-top: -10px;
        padding: 0 12px;
        border-left: 1px solid #DBDBDB;
        font-weight: 400;
        height: 20px;
    }

    /* 鼠标移入效果 */
    .loginLayerBox .inlineTwoInput.el-link.el-link--default:hover {
        color: #000;
        text-decoration: underline;
    }

    /* 无密码登录颜色不变化 */
    .loginLayerBox .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #606266;
    }

    /* 登录按钮 */
    .loginLayerBox .loginBut {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #39AC6A;
        font-size: 16px;
        font-weight: bold;
        border: 0;
        color: #fff;
        border-radius: 2px;
        clear: both;
        padding: 0;
    }

    /* 移入变色 登录按钮 */
    .loginLayerBox .el-button:hover {
        color: #fff;
        background-color: #39AC6A;
        border: none;
    }

    .loginLayerBox .el-button {
        color: #fff;
        background-color: #39AC6A;
    }



    /* 多选框变化颜色 */
    .loginLayerBox .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #39AC6A;
        border-color: #39AC6A;
    }

    .loginLayerBox .el-checkbox__inner:hover {
        border-color: #39AC6A;
    }

    .loginLayerBox .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #39AC6A;
    }



    /* 按鈕 */

    .loginLayerBox .el-button:active {
        color: #39AC6A;
        border-color: #39AC6A;
        outline: 0;
    }

    .loginLayerBox .el-button.is-plain:focus,
    .loginLayerBox .el-button.is-plain:hover {
        background: #39AC6A;
        border-color: #39AC6A;
        color: #fff;
    }

    /* 表单填入东西报错 */
    .loginLayerBox .el-form-item.is-error .el-input__inner {
        position: relative;
        z-index: 2;
    }

    .loginLayerBox .el-form-item__error {
        display: none;
    }

    /* 动态class 样式 */
    .loginLayerBox .el-form-item.is-error .isNotError .el-input__inner {
        border: 1px solid #DCDFE6;
        z-index: 1;
    }

    .loginLayerBox .el-input__suffix {
        z-index: 21;
    }