Vue快速实现通用表单验证功能

下面是“Vue快速实现通用表单验证功能”的完整攻略：

1. 需求背景

在前端开发中，表单验证是一个必不可少的功能，但每个表单的验证规则都不尽相同，造成了大量重复的工作，降低了开发效率。因此，我们需要一种通用的表单验证方案，可以快速实现各种表单验证规则。

2. 解决方案

Vue提供了丰富的API和生命周期，可以使开发者在编写代码时更加高效。我们可以使用Vue的v-model指令以及Computed属性和watch属性来实现通用表单验证功能，具体步骤如下：

首先，在vue实例中定义一个data对象，用来存储表单每个输入项的值，如下所示：

data () {
  return {
    form: {
      username: '',
      email: '',
      password: '',
      repeatPassword: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在6-20位之间', trigger: 'blur' }
      ],
      repeatPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validateConfirmPassword, trigger: 'blur' }
      ]
    }
  }
}

上面的代码中，form对象用于存储表单每个输入项的值，rules对象用于存储每个输入项的验证规则，其中每个验证规则都是一个数组，数组中包含多个验证条件。

然后，通过v-model指令将表单数据和data中的form对象双向绑定，如下所示：

<el-form label-width="80px" :model="form" ref="form" :rules="rules" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="repeatPassword">
    <el-input type="password" v-model="form.repeatPassword"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>

在上面的代码中，form对象和rules对象都作为el-form组件的属性传递，el-input中通过v-model指令将数据绑定到form中。

最后，通过Computed属性和watch属性来监听表单数据的变化和验证结果，如下所示：

computed: {
  formDataValid () {
    for (const item in this.form) {
      if (this.form.hasOwnProperty(item)) {
        if (this.$refs.form.fields[item]) {
          if (this.$refs.form.fields[item].validating) return false
          if (this.$refs.form.fields[item].errors.length > 0) return false
        }
      }
    }
    return true
  }
},
watch: {
  formDataValid (valid) {
    this.isFormValid = valid
  }
},
methods: {
  validateConfirmPassword (rule, value, callback) {
    if (value !== this.form.password) {
      callback(new Error('两次输入密码不一致'))
    } else {
      callback()
    }
  },
  submitForm (formName) {
    this.$refs[formName].validate(valid => {
      if (valid) {
        this.$alert('提交成功！', '提示', {
          confirmButtonText: '确定',
          type: 'success'
        })
      } else {
        return false
      }
    })
  },
  resetForm (formName) {
    this.$refs[formName].resetFields()
    this.isFormValid = false
  }
}

在上面的代码中，formDataValid是一个Computed属性，通过循环判断每个表单项是否验证通过的方式来计算出整个表单的验证结果，然后通过watch属性监听该属性的变化，一旦验证结果发生变化，就会将结果赋值给isFormValid属性，可以在提交表单的时候用来判断是否验证通过，submitForm方法中使用了该结果，如果验证不通过，就不会提交表单。

validateConfirmPassword是一个自定义的验证规则函数，用于验证两次密码输入是否一致。

3. 示例说明

下面演示两个示例来说明该方案的实现方法：

示例一：验证密码是否符合规则

假设有一个表单中只有一个密码输入框，需要验证密码符合一下规则：

密码不能为空；
密码长度必须在6-20位之间。

代码如下：

<el-form label-width="80px" :model="form" ref="form" class="demo-ruleForm">
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>

然后在data对象中，定义form对象和rules对象，其中rules对象定义了密码的验证规则，如下所示：

data () {
  return {
    form: {
      password: ''
    },
    rules: {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在6-20位之间', trigger: 'blur' }
      ]
    }
  }
}

最后，在submitForm方法中调用表单组件的validate方法来进行表单验证，代码如下：

submitForm (formName) {
  this.$refs[formName].validate(valid => {
    if (valid) {
      this.$alert('提交成功！', '提示', {
        confirmButtonText: '确定',
        type: 'success'
      })
    } else {
      return false
    }
  })
}

在执行提交操作时，表单会根据定义的rules对象来验证输入的密码是否符合规则，如果验证不通过就会弹出提示框。

示例二：验证两次密码是否一致

假设有一个表单中有两个密码输入框，需要验证两次输入的密码是否一致。代码如下：

<el-form label-width="80px" :model="form" ref="form" class="demo-ruleForm">
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="confirmPassword">
    <el-input type="password" v-model="form.confirmPassword"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>

然后在data对象中，定义form对象和rules对象，其中定义了验证两次密码是否一致的规则函数validateConfirmPassword，代码如下：

data () {
  return {
    form: {
      password: '',
      confirmPassword: ''
    },
    rules: {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在6-20位之间', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: this.validateConfirmPassword, trigger: 'blur' }
      ]
    }
  }
},
methods: {
  validateConfirmPassword (rule, value, callback) {
    if (value !== this.form.password) {
      callback(new Error('两次输入密码不一致'))
    } else {
      callback()
    }
  }
}

最后，在表单验证成功后，再判断formDataValid属性是否为true，如果为true，则表示所有输入项都通过了验证，这时就可以执行提交操作。如下所示：

submitForm (formName) {
  this.$refs[formName].validate(valid => {
    if (valid && this.formDataValid) {
      this.$alert('提交成功！', '提示', {
        confirmButtonText: '确定',
        type: 'success'
      })
    } else {
      return false
    }
  })
}

这样，在执行提交操作时，表单会根据定义的rules对象来验证两次密码输入是否一致，如果验证不通过就会弹出提示框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue快速实现通用表单验证功能 - Python技术站