script setupimport computed ref from vue;import User from apiapi;import nameRule passRule passcRule emailRule codeRule from utilsvalidateconst form = ref username password passwordc code

The reason why the input fields are not working is because the v-model directive is bound to the form object, which is a ref object. In order to make the input fields work with the v-model directive, you need to modify the form object to be a reactive object using the reactive function from the Vue Composition API.

Here's the updated code:

<script setup>
import { computed, reactive, ref } from "vue";
import { User } from '@/api/api';
import { nameRule, passRule, passcRule, emailRule, codeRule } from '@/utils/validate'

const form = reactive({
  username: '',
  password: '',
  passwordc: '',
  code: '',
  countdown: 0,
  isSendingEmail: false
})
const email = ref('');

const rules = ref({
  username: [{ validator: nameRule, trigger: 'blur' }],
  password: [{ validator: passRule, trigger: 'blur' }],
  passwordc: [{ validator: passcRule, trigger: 'blur' }],
  email: [{ validator: emailRule, trigger: 'blur' }],
  code: [{ validator: codeRule, trigger: 'blur' }]
})

const isValidEmail = computed(() => {
  const validSuffixes = [
    '@qq.com',
    '@gmail.com',
    '@yahoo.com',
    '@msn.com',
    '@hotmail.com',
    '@aol.com',
    '@ask.com',
    '@live.com',
    '@qq.com',
    '@0355.net',
    '@163.com',
    '@163.net',
    '@263.net',
    '@3721.net',
    '@yeah.net',
    '@aliyun.com'
  ];
  const suffix = email.value.substring(email.value.lastIndexOf('@'));
  return validSuffixes.includes(suffix);
});

// 注册接口
const register = async () => {
  const data = {
    username: form.username,
    password: form.password,
    email: email.value,
  };

  const res = await User.register(data);
  if (res.success) {
    alert("注册成功！");
  } else {
    alert("注册失败，请刷新重试！");
  }
}

// 邮箱接口
const sendEmail = async () => {
  if (form.isSendingEmail || !isValidEmail.value) {
    return;
  }
  const data = {
    email: email.value,
  };
  const res = await User.email(data).then((res) => {
    console.log(res);
  }).catch((error) => {
    console.log(error);
  })
  console.log(data);
  console.log(res);
  // if (res.status === 200) {
  //   alert("发送成功！");
  // } else {
  //   // alert("邮件发送失败，请刷新重试！");
  //   console.log("邮件发送失败，请刷新重试！");
  // }

  // 设置倒计时
  form.countdown = 60;
  form.isSendingEmail = true;
  const timer = setInterval(() => {
    if (form.countdown > 0) {
      form.countdown--;
    } else {
      clearInterval(timer);
      form.isSendingEmail = false;
    }
  }, 1000);
}
</script>

By making the form object reactive, the input fields will now be able to update the values in the form object