vue3 提交验证$ref的使用

在 Vue 3 中，可以使用 `ref` 函数来创建一个响应式的引用对象，可以在模板中使用 `$refs` 来访问这个引用对象，从而实现表单提交时的验证。

示例代码如下：

<template>
  <form @submit.prevent="submitForm">
    <label>
      Username:
      <input type="text" ref="usernameInput" />
    </label>
    <br />
    <label>
      Password:
      <input type="password" ref="passwordInput" />
    </label>
    <br />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const usernameInput = ref(null);
    const passwordInput = ref(null);

    const submitForm = () => {
      if (!usernameInput.value) {
        console.log('Please enter a valid username.');
        return;
      }

      if (!passwordInput.value) {
        console.log('Please enter a valid password.');
        return;
      }

      console.log('Form submitted!');
    };

    return {
      usernameInput,
      passwordInput,
      submitForm,
    };
  },
};
</script>

在上面的示例中，我们使用 `ref` 函数创建了 `usernameInput` 和 `passwordInput` 两个引用对象，并在模板中使用它们来获取表单中的输入值。在 `submitForm` 方法中，我们可以使用这些引用对象来验证表单输入的合法性。如果输入值不合法，我们可以输出错误信息，否则输出表单已经成功提交的信息。