Vue+iView表单校验，提高用户输入准确性！

2023-10-26 15:47:52

前言

在前端开发中，表单是必不可少的元素，用于收集用户输入的信息。为了确保收集的信息准确可靠，表单校验功能必不可少。Vue+iView框架提供了强大的表单校验功能，本文将为大家详细讲解如何使用Vue+iView实现表单校验，助力开发人员轻松构建出具有完善校验功能的表单。

Vue+iView表单校验入门

1. 安装iView

npm install iview

2. 引入iView

import Vue from 'vue'
import iView from 'iview'
Vue.use(iView)

3. 创建表单

<form @submit.prevent="submitForm">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" v-model="formData.name" :rules="nameRules">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" id="email" v-model="formData.email" :rules="emailRules">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" v-model="formData.password" :rules="passwordRules">
  </div>
  <button type="submit">提交</button>
</form>

4. 定义表单校验规则

export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        password: ''
      },
      nameRules: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      emailRules: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      passwordRules: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码最少6位', trigger: 'blur' }
      ]
    }
  },
  methods: {
    submitForm(e) {
      e.preventDefault()
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单
          this.$Message.success('提交成功！')
        } else {
          // 表单校验失败，提示用户
          this.$Message.error('请检查输入的内容！')
        }
      })
    }
  }
}

进阶指南

1. 自定义校验规则

除了内置的校验规则，Vue+iView还允许开发人员自定义校验规则。

const customRule = (value) => {
  if (value === 'error') {
    return '出错了！'
  } else {
    return true
  }
}

然后在表单校验规则中使用：

customRules: [
  { validator: customRule, trigger: 'blur' }
]

2. 表单校验反馈

当表单校验失败时，Vue+iView会自动生成错误提示。开发人员还可以自定义错误提示。

this.$Message.error('请检查输入的内容！')

3. 表单联动校验

Vue+iView支持表单联动校验，即某个字段的校验结果会影响其他字段的校验规则。

linkedRules: {
  password: {
    required: true,
    trigger: 'blur'
  },
  confirmPassword: {
    validator(value, field, callback) {
      if (value !== this.formData.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },
    trigger: 'blur'
  }
}