如果字段为空并且用户正在尝试提交表单，如何使输入字段边框变为红色答案

【问题标题】：How to make a input fields border red if fields are empty and user is trying to submit the form如果字段为空并且用户正在尝试提交表单，如何使输入字段边框变为红色
【发布时间】：2021-08-15 15:20:55
【问题描述】：

当字段为空并且用户尝试在不输入值的情况下提交表单时，我试图将输入字段的边框设为红色。当用户尝试提交表单而不使用 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>

【问题讨论】：

标签： javascript html vue.js vuejs3

【解决方案1】：

一种解决方案是跟踪“提交”状态，并仅在提交时为空字段应用invalid 类，并使用红色边框对其进行样式设置：

为isSubmitting 添加一个数据属性。

export default {
  data() {
    return {
      isSubmitting: false
    }
  }
}

在表单的 submit 处理程序中，将 isSubmitting 设置为 true。

export default {
  methods: {
    submit() {
      this.isSubmitting = true
    }
  }
}

对于每个输入，添加一个类绑定，当isSubmitting 并且字段值为空时设置invalid 类。

<input v-model="name" :class="{ invalid: isSubmitting && !name.trim() }">
<input v-model="age" :class="{ invalid: isSubmitting && !age.trim() }">
<input v-model="phone" :class="{ invalid: isSubmitting && !phone.trim() }">
<input v-model="address" :class="{ invalid: isSubmitting && !address.trim() }">

为.invalid 添加样式，将border-color 设置为红色。
```
<style>
.invalid {
  border-color: red;
}
</style>
```

demo

【讨论】：