详谈vue中的rules表单验证(常用)

详谈vue中的rules表单验证(常用)

Vue中的表单验证是常见的一种交互操作，可以帮助我们检验用户输入的数据是否符合要求，并且在数据有误的情况下，给出相应的提示。

Vue中表单验证的实现方式主要有两种：手写验证函数和使用第三方表单验证库。

在Vue中，常见的表单验证方法是通过在form表单中添加rules属性来实现的，下面我们来看看这个方法到底是怎么实现的。

form表单引入验证规则

在Vue中，我们使用Vue.use()方法来安装第三方插件，Vue并没有提供内置的表单验证插件，但是我们可以通过引入vee-validate插件来实现表单验证，同时我们也可以使用自己写的验证规则，只需要在data数据中定义rules属性。

在data数据中，我们定义一个rules属性，它是一个对象数组，每个数组项都是一个对象，对应一个表单项，对象里面包含了对这个表单项的验证规则。

data() {
    return {
        form: {},
        rules: {
            name: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
            ]
        }
    }
}

以上定义了两个表单项的验证规则，name和password分别定义了两个验证规则，包括必填、长度限制和失焦事件触发。
其中required表示必填，blur表示输入框失焦事件触发，其他的可以根据固定格式设置。

form表单绑定验证规则

对于一个表单，我们可以通过v-model指令来绑定表单的数据来源，通过v-on指令来绑定表单的事件。在Vue中，我们使用v-bind指令来绑定规则对象。需要注意的是，规则对象必须和表单对应的数据属性同名，用于进行数据校验。

<el-form :model="form" :rules="rules">
    <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
</el-form>

上面的代码中，我们使用了Element-UI的表单组件，通过prop属性来绑定规则对象的名称，即name和password。可以看到，我们在定义表单规则时，规则对象的属性名必须和字段prop值相同，验证器才会在输入事件中对该字段进行验证。

表单验证原理简述

在Vue中，当一个表单项失焦或者提交时，会触发验证事件，然后执行定义在rules中的验证规则方法，校验通过时会显示验证成功的信息，否则会显示错误提示信息。

在vue中，已经实现了对prop 设置了prop属性的表单元素，自动进行了校验的功能，只要messgae函数中书写验证提示信息，即可在表单元素下方显示提示信息。

表单验证的两个示例

示例1：年龄验证

需求：检查输入的年龄是否在18~60之间。

<template>
  <div>
    <el-form ref='form' :model='form' :rules='rules' label-width='120px'>
      <el-form-item label='年龄' prop='age'>
        <el-input v-model='form.age' class='input-with-select' placeholder='请输入年龄'></el-input>
      </el-form-item>
      <el-button type='primary' @click='submit'>提交</el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          age: ''
        },
        rules: {
          age: [
            { required: true, message: '年龄不能为空', trigger: 'blur' },
            { type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
            { min: 18, max: 60, message: '年龄必须在18~60岁之间', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$message({
              type: 'success',
              message: '验证成功！'
            });
          } else {
            this.$message({
              type: 'error',
              message: '验证失败，请检查输入！'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style>
  .input-with-select {
    width: 200px;
  }
</style>

示例2：手机号验证

需求：检查输入的手机号是否符合规范。

<template>
  <div>
    <el-form>
      <el-form-item label='手机号' prop='phone'>
        <el-input v-model='form.phone' class='input-with-select' placeholder='请输入手机号'></el-input>
      </el-form-item>
      <el-button type='primary' @click='submit'>提交</el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          phone: ''
        }
      }
    },
    computed: {
      isPhone() {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        return reg.test(this.form.phone);
      }
    },
    methods: {
      submit() {
        if (this.isPhone) {
          this.$message({
            type: 'success',
            message: '手机号格式正确！'
          });
        } else {
          this.$message({
            type: 'error',
            message: '手机号格式错误，请重新输入！'
          });
        }
      }
    }
  }
</script>

<style>
  .input-with-select {
    width: 200px;
  }
</style>

以上两个示例分别使用了Element-UI的表单组件和自定义验证规则实现了对年龄和手机号的验证。在实际使用过程中，我们可以根据需要修改rules对象中的验证规则来实现不同的验证需求。