vue3.0输入框必填

Vue3.0中，我们可以利用HTML5的`<input>`元素的`required`属性以及v-model指令来实现输入框的必填验证。以下是一个基本示例：

<template>
  <div>
    <input v-model="form.name" type="text" placeholder="请输入名字" :disabled="isDisabled" required />
    <button @click="submitForm">提交</button>
    <p v-if="form.errors.name">{{ form.errors.name }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const form = reactive({ name: '', errors: {} }); // 使用ref并初始化错误对象

function submitForm() {
  if (!form.name) {
    form.errors.name = '姓名不能为空';
  } else {
    // 提交表单逻辑...
    form.errors.name = '';
  }
}

onMounted(() => {
  // 如果需要在页面加载后立即进行必填检查，可以在这里添加
});
</script>

在这个例子中，`:required`属性用于设置输入字段为必填，当用户尝试提交表单而输入框为空时，浏览器会显示默认的警告信息。`v-model`双向绑定数据，`errors.name`会在验证失败时展示自定义的错误提示。