Master Uniapp Form Handling: Login, Registration, and Validation in One Lesson

Understanding Uniapp Form Basics

Forms collect user input for login, registration, search, comments, and other interactions. The essential skills include common components (input, radio, checkbox, picker), v-model two‑way binding, validation rules (required, format, length), and submission with API requests.

Four Core Form Components

input – text fields for account, password, phone number.

radio – single‑choice for gender, status.

checkbox – multiple‑choice for agreements, interests.

picker – selector for date, city, dropdown.

v-model Two‑Way Binding

Binding an input’s value to a data variable keeps them synchronized automatically.

<input v-model="username" placeholder="Enter account" />
<input v-model="password" password placeholder="Enter password" />

Practical Example 1: Login Form

Complete template and script code demonstrates input fields, validation, loading indicator, API request, token storage, and navigation.

<template>
  <view class="form-box">
    <input v-model="username" placeholder="Enter phone number" class="input" />
    <input v-model="password" password placeholder="Enter password" class="input" />
    <button type="primary" @click="login">Login</button>
  </view>
</template>

<script>
export default {
  data() {
    return { username: '', password: '' };
  },
  methods: {
    login() {
      // 1. Validation
      if (!this.username) { uni.showToast({title:'Enter phone number',icon:'none'}); return; }
      if (!/^1[3-9]\d{9}$/.test(this.username)) { uni.showToast({title:'Invalid phone format',icon:'none'}); return; }
      if (!this.password || this.password.length < 6) { uni.showToast({title:'Password at least 6 characters',icon:'none'}); return; }
      // 2. Submit request
      uni.showLoading({title:'Logging in...'});
      uni.request({
        url: 'https://xxx.com/api/login',
        method: 'POST',
        data: { username: this.username, password: this.password },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({title:'Login successful'});
            uni.setStorageSync('token', res.data.token);
            uni.switchTab({url:'/pages/index/index'});
          } else {
            uni.showToast({title: res.data.msg || 'Login failed', icon:'none'});
          }
        },
        fail: () => { uni.showToast({title:'Network error', icon:'none'}); },
        complete: () => { uni.hideLoading(); }
      });
    }
  }
}
</script>

<style scoped>
.form-box { padding: 30rpx; }
.input { border: 1rpx solid #eee; border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; }
button { margin-top: 30rpx; }
</style>

Practical Example 2: Registration Form

This example shows how to use radio-group, checkbox-group, validate phone number and agreement, and submit registration data.

<template>
  <view class="form-box">
    <input v-model="phone" placeholder="Enter phone number" class="input" />
    <view class="radio-box">
      <radio-group v-model="gender">
        <label><radio value="1"/>Male</label>
        <label><radio value="0"/>Female</label>
      </radio-group>
    </view>
    <view class="check-box">
      <checkbox-group v-model="agree">
        <label><checkbox value="agree"/>I agree to the user agreement</label>
      </checkbox-group>
    </view>
    <button type="primary" @click="register">Register</button>
  </view>
</template>

<script>
export default {
  data() {
    return { phone: '', gender: '1', agree: [] };
  },
  methods: {
    register() {
      // Validation
      if (!this.phone) { uni.showToast({title:'Enter phone number',icon:'none'}); return; }
      if (this.agree.length === 0) { uni.showToast({title:'Please agree to the user agreement',icon:'none'}); return; }
      // Submit registration
      uni.showLoading();
      uni.request({
        url: 'https://xxx.com/api/register',
        method: 'POST',
        data: { phone: this.phone, gender: this.gender },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({title:'Registration successful'});
            setTimeout(() => { uni.navigateBack(); }, 1500);
          }
        },
        complete: () => { uni.hideLoading(); }
      });
    }
  }
}
</script>

Common Validation Patterns

Required check

if (!this.username) {
  uni.showToast({title:'Enter account',icon:'none'});
  return;
}

Phone format check

if (!/^1[3-9]\d{9}$/.test(this.phone)) {
  uni.showToast({title:'Invalid phone format',icon:'none'});
  return;
}

Password length check

if (this.password.length < 6) {
  uni.showToast({title:'Password at least 6 characters',icon:'none'});
  return;
}

Typical Troubleshooting for Beginners

Input value not updating – ensure v-model is bound to the variable.

Radio/checkbox not responding – wrap with radio-group/checkbox-group and bind v-model.

Validation not triggered – place validation logic at the start of the submit handler and return on failure.

Input fields obscured – adjust padding/margin and avoid fixed positioning over inputs.