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

Question

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

标签： javascripthtmlvue.jsvuejs3

Answer 1

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

1. 为 .添加数据属性isSubmitting。

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

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

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

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

   <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() }">
   

4. 添加样式.invalid，设置border-color为红色。

   <style>
   .invalid {
     border-color: red;
   }
   </style>
   

演示