element-ui中el-form如何自定义验证

发布时间：2022-08-01 11:20:08 作者：iii
来源：亿速云阅读：344

Element-UI中el-form如何自定义验证

Element-UI 是一套基于 Vue.js 的组件库，广泛应用于前端开发中。其中，el-form 组件是用于表单验证的核心组件之一。虽然 Element-UI 提供了丰富的内置验证规则，但在实际开发中，我们常常需要根据业务需求自定义验证规则。本文将详细介绍如何在 Element-UI 的 el-form 中实现自定义验证。

1. Element-UI 表单验证基础

在开始自定义验证之前，我们先回顾一下 Element-UI 中 el-form 的基本用法。

1.1 基本结构

el-form 组件通常包含多个 el-form-item，每个 el-form-item 对应一个表单字段。表单验证可以通过 rules 属性来定义。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></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>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

1.2 内置验证规则

Element-UI 提供了多种内置验证规则，例如：

required: 必填项。
min 和 max: 最小值和最大值。
type: 输入类型，如 email、date 等。
pattern: 正则表达式验证。

这些规则可以通过 rules 属性进行配置。

2. 自定义验证规则

虽然内置验证规则可以满足大部分需求，但在某些情况下，我们需要自定义验证规则。Element-UI 提供了 validator 属性来实现自定义验证。

2.1 使用 `validator` 属性

validator 是一个函数，接收三个参数：

rule: 当前验证规则。
value: 当前字段的值。
callback: 回调函数，用于返回验证结果。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="自定义验证" prop="customField">
      <el-input v-model="form.customField"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        customField: ''
      },
      rules: {
        customField: [
          { validator: this.validateCustomField, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateCustomField(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else if (value.length < 5) {
        callback(new Error('内容长度不能小于5'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

2.2 异步验证

在某些情况下，验证规则可能需要调用后端接口进行验证。此时，我们可以使用异步验证。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="异步验证" prop="asyncField">
      <el-input v-model="form.asyncField"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        asyncField: ''
      },
      rules: {
        asyncField: [
          { validator: this.validateAsyncField, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateAsyncField(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else {
        // 模拟异步请求
        setTimeout(() => {
          if (value === 'valid') {
            callback();
          } else {
            callback(new Error('内容无效'));
          }
        }, 1000);
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

2.3 动态验证规则

在某些情况下，验证规则可能需要根据其他字段的值进行动态调整。此时，我们可以使用动态验证规则。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="动态验证" prop="dynamicField">
      <el-input v-model="form.dynamicField"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        dynamicField: ''
      },
      rules: {
        dynamicField: [
          { validator: this.validateDynamicField, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validateDynamicField(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else if (value === this.form.dynamicField) {
        callback(new Error('内容不能与动态字段相同'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

3. 高级用法

3.1 表单整体验证

在某些情况下，我们需要对整个表单进行验证，而不仅仅是单个字段。此时，可以使用 validate 方法。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></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>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

3.2 表单重置

在表单提交后，我们通常需要重置表单。此时，可以使用 resetFields 方法。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></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>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
          this.resetForm();
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

3.3 表单验证状态

在某些情况下，我们需要获取表单的验证状态。此时，可以使用 validateField 方法。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></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>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="checkUsername">检查用户名</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    checkUsername() {
      this.$refs.form.validateField('username', errorMessage => {
        if (errorMessage) {
          alert(errorMessage);
        } else {
          alert('用户名验证通过');
        }
      });
    }
  }
};
</script>

4. 总结

Element-UI 的 el-form 组件提供了强大的表单验证功能，通过内置验证规则和自定义验证规则，我们可以轻松实现各种复杂的表单验证需求。在实际开发中，合理使用这些功能，可以大大提高开发效率和用户体验。

希望本文对你理解和使用 Element-UI 的 el-form 组件有所帮助。如果你有任何问题或建议，欢迎在评论区留言讨论。