UniApp实现自定义表单与数据校验的设计与开发技巧

<template>
  <view>
    <form>
      <input v-model="formData.username" type="text" placeholder="请输入用户名" />
      <input v-model="formData.password" type="password" placeholder="请输入密码" />
      <input v-model="formData.confirmPassword" type="password" placeholder="请确认密码" />
      <button @click="submitForm">提交</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 提交表单逻辑处理
    }
  }
};
</script>

export default {
  methods: {
    validateForm() {
      if (!this.formData.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return false;
      }
      if (this.formData.password !== this.formData.confirmPassword) {
        uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    submitForm() {
      if (!this.validateForm()) {
        return;
      }
      // 提交表单逻辑处理
    }
  }
};