Javascript 如果字段为空且用户试图提交表单，如何使输入字段边框为红色

当输入字段为空且用户试图提交表单而不输入值时，我尝试将输入字段边框设为红色。当用户试图使用vue.js提交表单而不输入任何值时，字段边框应变为红色。在填写表格之前，表格不得提交

html

<template>
    <div id="border_red">
        <input id="name" name="name"  v-model="name"/>
        <input id="name" name="name" v-model="age"/>
        <input id="name" name="name" v-model="phone"/>
        <input id="name" name="name" v-model="address"/>
        <button>submit</button>
    </div>
</template>

提交

vue.js

<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
    data() {
        return {
            name:null,
            address:null,
            age:'',
            phone:'',
            
        };
    },
    methods: {
        
        }
    }
});
app.mount('#border_red');
</script>

const app=Vue.createApp({
数据（）{
返回{
名称：空，
地址：空，
年龄：''，
电话：''，
};
},
方法：{
}
}
});
应用程序安装（“#边框红色”）；

一种解决方案是跟踪“提交”状态，并仅在提交时为空字段应用

无效的

类，将其样式设置为红色边框：

为

isSubmitting

添加数据属性

导出默认值{
数据（）{
返回{
提交：错误
}
}
}

在表单的

submit

处理程序中，将

isSubmitting

设置为true

导出默认值{
方法：{
提交（）{
this.isSubmitting=true
}
}
}

对于每个输入，添加一个类绑定，在

isSubmitting

且字段值为空时设置

无效的
类

为

.invalid

添加样式，将

边框颜色设置为红色


.无效{
边框颜色：红色；
}