Forms and Input Handling

<script setup>
import { ref } from &#039;vue'

const form = ref({
  name: &#039;',
  email: &#039;',
  password: &#039;',
  age: null,
  bio: &#039;',
  role: &#039;',
  skills: [],
  newsletter: false,
  notifications: &#039;email',
  avatar: null,
  rating: 0
})
</script>

<template>
  <form @submit.prevent="submitForm">
    <!-- Text input -->
    <input type="text" v-model.trim="form.name" placeholder="Full Name" />

    <!-- Email -->
    <input type="email" v-model.lazy="form.email" placeholder="Email (updates on blur)" />

    <!-- Password -->
    <input type="password" v-model="form.password" placeholder="Password" />

    <!-- Number (converts string to number) -->
    <input type="number" v-model.number="form.age" placeholder="Age" />

    <!-- Textarea -->
    <textarea v-model.trim="form.bio" rows="4" placeholder="Bio"></textarea>

    <!-- Select -->
    <select v-model="form.role">
      <option value="">Select Role</option>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="manager">Manager</option>
    </select>

    <!-- Multiple checkboxes → array -->
    <label><input type="checkbox" v-model="form.skills" value="Vue" /> Vue</label>
    <label><input type="checkbox" v-model="form.skills" value="React" /> React</label>
    <label><input type="checkbox" v-model="form.skills" value="Angular" /> Angular</label>
    <p>Skills: {{ form.skills.join(&#039;, ') }}</p>

    <!-- Single checkbox → boolean -->
    <label><input type="checkbox" v-model="form.newsletter" /> Subscribe to newsletter</label>

    <!-- Radio buttons -->
    <label><input type="radio" v-model="form.notifications" value="email" /> Email</label>
    <label><input type="radio" v-model="form.notifications" value="sms" /> SMS</label>
    <label><input type="radio" v-model="form.notifications" value="none" /> None</label>

    <!-- Range slider -->
    <input type="range" v-model.number="form.rating" min="0" max="10" />
    <span>Rating: {{ form.rating }}/10</span>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { ref, computed } from &#039;vue'

const form = ref({ name: &#039;', email: '', password: '', confirmPassword: '' })
const submitted = ref(false)

// Computed validation errors
const errors = computed(() => {
  const e = {}
  if (!form.value.name.trim()) e.name = &#039;Name is required'
  else if (form.value.name.length < 2) e.name = &#039;Name must be at least 2 characters'

  if (!form.value.email) e.email = &#039;Email is required'
  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email)) e.email = &#039;Invalid email format'

  if (!form.value.password) e.password = &#039;Password is required'
  else if (form.value.password.length < 8) e.password = &#039;Password must be at least 8 characters'
  else if (!/[A-Z]/.test(form.value.password)) e.password = &#039;Must contain at least one uppercase letter'

  if (form.value.confirmPassword !== form.value.password) e.confirmPassword = &#039;Passwords do not match'

  return e
})

const isValid = computed(() => Object.keys(errors.value).length === 0)

const showError = (field) => submitted.value && errors.value[field]

function submitForm() {
  submitted.value = true
  if (isValid.value) {
    console.log(&#039;Form submitted:', form.value)
    alert(&#039;Registration successful!')
  }
}
</script>

<template>
  <div class="form-wrapper">
    <h2>Create Account</h2>
    <form @submit.prevent="submitForm" novalidate>
      <div class="field">
        <label>Full Name</label>
        <input
          type="text"
          v-model.trim="form.name"
          :class="{ error: showError(&#039;name') }"
          placeholder="Alice Johnson"
        />
        <span v-if="showError(&#039;name')" class="error-msg">{{ errors.name }}</span>
      </div>

      <div class="field">
        <label>Email</label>
        <input
          type="email"
          v-model.lazy="form.email"
          :class="{ error: showError(&#039;email') }"
          placeholder="alice@example.com"
        />
        <span v-if="showError(&#039;email')" class="error-msg">{{ errors.email }}</span>
      </div>

      <div class="field">
        <label>Password</label>
        <input
          type="password"
          v-model="form.password"
          :class="{ error: showError(&#039;password') }"
        />
        <span v-if="showError(&#039;password')" class="error-msg">{{ errors.password }}</span>

        <!-- Password strength indicator -->
        <div class="strength-bar">
          <div :class="[&#039;strength', strengthLevel]" :style="{ width: strengthWidth }"></div>
        </div>
      </div>

      <div class="field">
        <label>Confirm Password</label>
        <input
          type="password"
          v-model="form.confirmPassword"
          :class="{ error: showError(&#039;confirmPassword') }"
        />
        <span v-if="showError(&#039;confirmPassword')" class="error-msg">{{ errors.confirmPassword }}</span>
      </div>

      <button type="submit" :disabled="submitted && !isValid" class="submit-btn">
        Create Account
      </button>
    </form>
  </div>
</template>