Element UI表单验证如何做

Element UI 提供了丰富的表单验证规则，可以很方便地对表单数据进行验证。下面是一个使用 Element UI 表单验证的示例：

<template>
  <el-form
           style="width: 500px"
           label-width="100px"
           label-position="left"
           :disabled="false"
           label-suffix="："
           :inline="false"
           :validate-on-rule-change="true"
           status-icon
           :model="form"
           :rules="rules"
           ref="form" >
    <el-form-item label="用户名" prop="username" :error="error" :validate-status="status">
      <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="primary" @click="addRule">动态添加校验规则</el-button>
      <el-button type="success" @click="showSuccess">showSuccess</el-button>
      <el-button type="danger" @click="showError">showError</el-button>
      <el-button type="warning" @click="showValidating">校验中</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      error:"",
      status:"",
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: this.noSpaceValidator, trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    // 自定义校验器，检查密码是否包含空格
    noSpaceValidator(rule, value, callback) {
      if (/\s/.test(value)) {
        callback(new Error('密码不能包含空格'));
      } else {
        callback();
      }
    },
    addRule() {
      const userValidator = (rule, value, callback) => {
        if (value.length > 3) {
          this.inputError = ''
          this.inputValidateStatus = ''
          callback()
        } else {
          callback(new Error('用户名长度必须大于3'))
        }
      }
      const newRule = [
        ...this.rules.username,
        { validator: userValidator, trigger: 'change' }
      ]
      this.rules = Object.assign({}, this.rules, { username: newRule })
    },
    showError() {
      this.status = 'error'
      this.error = '用户名输入有误'
    },
    showSuccess() {
      this.status = 'success'
      this.error = ''
    },
    showValidating() {
      this.status = 'validating'
      this.error = ''
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交操作
          console.log('表单验证通过，执行提交操作');
        } else {
          // 表单验证失败，提示错误信息
          console.log('表单验证失败，提示错误信息');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，我们使用 el-form 组件包含了一个表单，其中的每个表单项使用 el-form-item 组件包裹，使用 v-model 指令双向绑定表单数据。我们还定义了 rules 对象，该对象定义了各个表单项的验证规则，包括验证规则的类型、验证失败时的提示信息和触发验证的事件。在表单提交时，我们使用 $refs.form.validate() 方法执行表单验证，如果验证通过则执行表单提交操作，否则提示错误信息。

在 Element UI 中，还提供了很多内置的验证规则，如 required、email、url、number 等，可以根据需要使用。如果内置的验证规则不能满足需求，我们还可以自定义验证规则，具体可以参考 Element UI 的文档。