Vue Element-ui表单校验规则实现

下面我将为您介绍如何使用Vue中的Element-ui表单校验规则。

1. 简介

在表单相关的开发中，输入框、文本框等输入控件的校验是必不可少的。Vue支持使用Element-ui提供的校验规则方法，可以轻松实现表单验证的效果。而Element-ui提供的校验规则包括以下几个方面：

required: 必填项校验
pattern: 模式匹配规则校验（正则校验）
range: 数值范围校验
min/max: 自定义数值最小值/最大值校验
email: 邮箱校验
url: url格式校验
tel: 手机号格式校验
date: 时间格式校验
method: Table组件相关规则
其他自定义规则等等

2. 使用方法

2.1 基本使用

使用Element-ui表单校验功能的方法很简单，只需要在需要校验的表单控件上添加rules属性，并将校验规则写成一个数组即可。例如，以下是一个简单的示例：

<el-form :model="form" ref="form">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="form.age" placeholder="请输入年龄"></el-input>
  </el-form-item>
</el-form>

在上述示例中，我们设置了两个表单项，分别对应了输入框中的“名称”和“年龄”。而需要进行校验的表单项在el-form-item中定义了prop属性，该属性的值为表单项所对应的字段名。同时在el-input中，我们对于年龄输入框使用了修饰符.number，表示我们希望该输入框的值是一个数字类型。

接下来，我们只需要在el-form-item中通过rules属性定义校验规则即可。例如，对于“名称”这个输入框，我们设置了必填、最长为10个字符的校验规则，其代码如下：

<el-form :model="form" ref="form">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="form.age" placeholder="请输入年龄"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('校验通过');
        } else {
          alert('校验失败');
          return false;
        }
      });
    }
  }
  rules: {
    name: [
      { required: true, message: '请输入名称', trigger: 'blur' },
      { max: 10, message: '名称最长为10个字符', trigger: 'blur' }
    ]
  }
}
</script>

在以上代码中，我们为名称输入框添加了两个校验规则，第一个规则表示名称这个输入框是必填的，即required: true，同时定义了校验失败时的提示信息message和校验时机为“失去焦点时”的trigger。而第二个规则表示名称最多只能输入10个字符，即max: 10。

在实际工作中，如果需要应用多个规则，只需要将其添加到数组中即可。例如，需要为年龄输入框定义必填和年龄范围规则，代码如下：

<el-form :model="form" ref="form">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="form.age" placeholder="请输入年龄"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('校验通过');
        } else {
          alert('校验失败');
          return false;
        }
      });
    }
  },
  rules: {
    name: [
      { required: true, message: '请输入名称', trigger: 'blur' },
      { max: 10, message: '名称最长为10个字符', trigger: 'blur' }
    ],
    age: [
      { required: true, message: '请输入年龄', trigger: 'blur' },
      { type: 'number', message: '年龄只能为数字', trigger: 'blur' },
      { min: 18, max: 100, message: '年龄必须在18岁到100岁之间', trigger: 'blur' }
    ]
  }
}
</script>

在以上示例中，我们为年龄输入框定义了三个校验规则，分别表示必填、数字类型和年龄范围限制。

2.2 自定义校验规则

在实际工作中，有时候需要自定义表单校验规则。例如，需要验证用户输入的手机号是否合法，我们可以通过自定义校验规则来实现。而具体的操作步骤如下：

在Vue组件中定义一个公共方法，用于手机号格式的正则校验，例如：

export default {
  data() {
    return {
      form: {
        mobile: ''
      }
    }
  },
  methods: {
    validateMobile(rule, value, callback) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('请输入正确的手机号'));
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('校验通过');
        } else {
          alert('校验失败');
          return false;
        }
      });
    }
  },
  rules: {
    mobile: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { validator: this.validateMobile, trigger: 'blur' }
    ]
  }
}

在以上代码中，我们定义了一个名为validateMobile的方法，该方法接受三个参数：校验规则、输入框的值和回调函数。我们可以通过写一个手机号格式的正则表达式来校验输入框中的手机号格式是否正确。如果该手机号格式正确，我们调用回调函数并将错误信息设置为null；否则我们通过new Error(message)将错误信息传递给回调函数。

在表单校验规则中使用自定义规则，例如:

<el-form :model="form" ref="form">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
  </el-form-item>
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        mobile: ''
      }
    }
  },
  methods: {
    validateMobile(rule, value, callback) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('请输入正确的手机号'));
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('校验通过');
        } else {
          alert('校验失败');
          return false;
        }
      });
    }
  },
  rules: {
    mobile: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { validator: this.validateMobile, trigger: 'blur' }
    ]
  }
}
</script>

在以上代码中，我们使用validator属性来引用自定义的规则方法——即引用我们在上面定义的那个validateMobile方法来校验手机号格式。

这样，我们就可以轻松实现自定义校验规则了。