vue3 tsx element plus 中表单校验

// 以下都是单个input校验更加灵活
// LoginForm.tsx 
import { defineComponent, ref } from 'vue'
import { validateUsername, validatePassword } from './validate'

export default defineComponent({
  name: 'LoginForm',

  setup() {
    const username = ref('')
    const password = ref('')
    const errors = ref({ username: '', password: '' })

    const validateInput = (field: 'username' | 'password') => {
      let validationResult
      if (field === 'username') {
        validationResult = validateUsername(username.value)
      } else {
        validationResult = validatePassword(password.value)
      }
      if (validationResult === true) {
        errors.value[field] = ''
      } else {
        errors.value[field] = validationResult
      }
    }

    return () => (
      <div>
        <form onSubmit={(event) => {
          event.preventDefault()
          validateInput('username')
          validateInput('password')
          if (!errors.value.username && !errors.value.password) {
            alert('登录成功!')
          }
        }}>
          <label>
            用户名:
            <input
              type="text"
              placeholder="输入用户名"
              value={username.value}
              onInput={(event) => {
                username.value = event.target.value
                validateInput('username')
              }}
            />
            {errors.value.username && <p style="color: red">{errors.value.username}</p>}
          </label>
          <label>
            密码:
            <input
              type="password"
              placeholder="输入密码"
              value={password.value}
              onInput={(event) => {
                password.value = event.target.value
                validateInput('password')
              }}
            />
            {errors.value.password && <p style="color: red">{errors.value.password}</p>}
          </label>
          <button type="submit">登录</button>
        </form>
      </div>
    )
  },
})

// validate.ts
export function validateUsername(username?: string): string | true {
  if (!username) {
    return '用户名不能为空!'
  }
  return true
}

export function validatePassword(password?: string): string | true {
  if (!password) {
    return '密码不能为空!'
  }
  return true
}

下边是统一校验
 

// LoginForm.tsx
import { defineComponent, ref } from 'vue'
import { validateLogin } from './validate'

export default defineComponent({
  name: 'LoginForm',

  setup() {
    const username = ref('')
    const password = ref('')
    const errors = ref({ username: '', password: '' })

    const submitForm = () => {
      const validationResult = validateLogin(username.value, password.value)
      if (validationResult === true) {
        alert('登录成功!')
        errors.value = { username: '', password: '' }  // Clear errors on success
      } else {
        errors.value[validationResult.field] = validationResult.error
      }
    }

    return () => (
      <div>
        <form onSubmit={(event) => {
          event.preventDefault()
          submitForm()
        }}>
          <label>
            用户名:
            <input
              type="text"
              placeholder="输入用户名"
              value={username.value}
              onInput={(event) => (username.value = event.target.value)}
            />
            {errors.value.username && <p style="color: red">{errors.value.username}</p>}
          </label>
          <label>
            密码:
            <input
              type="password"
              placeholder="输入密码"
              value={password.value}
              onInput={(event) => (password.value = event.target.value)}
            />
            {errors.value.password && <p style="color: red">{errors.value.password}</p>}
          </label>
          <button type="submit">登录</button>
        </form>
      </div>
    )
  },
})
// validate.ts
export function validateLogin(username: string, password: string): { field: string; error: string; } | true {
  if (!username) {
    return { field: 'username', error: '用户名不能为空!' }
  }
  if (!password) {
    return { field: 'password', error: '密码不能为空!' }
  }
  return true
}