通过Element实现表单验证

Element是一个基于Vue.js 2.0的桌面端组件库。它提供了丰富的组件，包括表单组件。本文将从多个方面阐述如何通过Element实现表单验证。

一、为表单添加验证规则

通过在表单元素上绑定rules属性，可以为表单添加验证规则。

  
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name" name="name" :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' }]" />
    </el-form-item>
  

上述代码中prop属性的值为表单元素的字段名，rules属性的值为对该字段的验证规则。在这个例子中，必填的验证规则为required，提示信息为“请输入用户名”，验证触发方式为blur即失去焦点触发。还可以设置其它的验证规则，如最小长度、最大长度、正则表达式等等。

二、动态修改验证规则

Element提供了一组hook属性，可以让我们在验证过程中进行一些动态的修改行为。这些hook分别是validator、validate、validateFailed。

validator：在表单值发生变化时触发，可以动态设置表单的验证规则。

  
    <el-form-item label="手机号" prop="tel">
      <el-input v-model="form.tel" name="tel" :rules="[ { required: true, message: '请输入手机号', trigger: 'blur' }]" @blur="checkPhone" />
    </el-form-item>
  

  
    methods: {
      checkPhone() {
        if(/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(this.form.tel)) {
          this.$refs.form.validateField('tel');
        } else {
          this.$refs.form.validateField('tel', '手机号格式不正确');
        }
      }
    }
  

在这个例子中，我们为手机号添加了一个额外的验证方法checkPhone。如果手机号不符合格式，我们可以通过调用validateField方法动态设置一个错误信息，这样就可以避免弹出一个不必要的提示框。

三、自定义验证规则

如果Element提供的验证规则不能够满足我们的需求，我们可以通过自定义验证规则来满足我们的需求。

  
    Vue.component('el-phone', {
      template: '<el-input v-model="value" :placeholder="placeholder" :readonly="readonly" :disabled="disabled" :maxlength="maxlength" @change="handleChange" />',
      props: {
        value: { type: String, default: '' },
        placeholder: { type: String, default: '请输入电话号码' },
        readonly: { type: Boolean, default: false },
        disabled: { type: Boolean, default: false },
        maxlength: { type: Number, default: 11 },
      },
      methods: {
        handleChange(e) {
          const value = e.target.value;
          if(!/^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[89])\d{8}$/.test(value)) {
            this.$emit('input', '');
            this.$emit('error', '请输入有效的手机号码');
          } else {
            this.$emit('input', value);
            this.$emit('success', value);
          }
        }
      }
    });
  

在这个例子中，我们新增了一个名为el-phone的自定义组件。在handleChange方法里，我们使用了和前面介绍的动态验证相同的方式，动态设置验证结果。要使用这个组件，只需要在表单中绑定value属性即可。

四、错误提示

Element提供了一套强大的错误提示机制，可以让我们在表单出错时及时发现问题，并提示出错的原因。

  
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone" name="phone" placeholder="请输入手机号码" @blur="checkPhone" />
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="form.code" name="code" placeholder="请输入验证码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="submitting" @click="submit">提交</el-button>
      </el-form-item>
      <div slot="error">{{$refs.form?.$el?.querySelector?.('.el-form-item__error')?.textContent}}</div>
    </el-form>
  

在这个例子中，我们可以看到一个名为error的slot。在普通情况下，它是不会显示的，只有在表单验证不通过时，我们才会在这里显示错误信息。使用Element提供的querySelector方法，可以迅速地找到错误提示框。

五、图形验证码验证

图形验证码是一种常见的用户验证方式，也是表单验证方案中常见的一种方案。可以通过Element提供的el-image组件快速实现图形验证码的验证功能。

  
    <el-form-item label="图形验证码" prop="imageCode">
      <el-input v-model="form.imageCode" name="imageCode" placeholder="请输入验证码" />
      <el-image src="/api/randCode.php" style="width: 100px;height: 40px;margin-left: 1rem;" @click.native="changeRandCode" :key="randCode" />
    </el-form-item>
  

在这个例子中，我们可以看到一组图形验证码的实现方式。在点击验证码时，我们会刷新一个新的验证码，从而完成验证的过程。

六、总结

通过本文的介绍，我们可以看到Element是一个非常棒的表单组件库，为我们提供了无数的组件和接口，可以让我们完成各种各样的表单验证任务。希望本文对读者有所帮助，也希望读者们在开发中能够加以应用。