element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】

下面就针对题目中所涉及的内容进行详细介绍。

Element UI中的表单验证

Element UI提供了简单易用的表单验证功能。在Vue项目中使用Element UI时，可以通过对Element UI的form组件进行配置，来实现表单的验证功能。

验证名称重复

在表单验证过程中，可能会遇到需要验证某个字段的值是否与数据库中已有的值重复的情况。此时，可以通过自定义验证器来实现这个功能。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="名称">
      <el-input v-model="form.name"></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: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: this.checkName, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单数据了
        }
      })
    },
    checkName(rule, value, callback) {
      // 模拟后台接口查询
      setTimeout(() => {
        if (value === '已存在的名称') {
          callback(new Error('名称已存在'))
        } else {
          callback()
        }
      }, 1000)
    }
  }
}
</script>

在上述代码中，我们通过自定义验证器checkName来实现名称重复验证功能。在该验证器中，我们通过模拟后台接口查询已有的名称信息，来验证当前输入的名称是否已存在于数据库中。如果已存在，则返回一个Error对象，否则返回null。

在表单验证规则中，我们使用了自定义验证器checkName来验证名称的重复性。当名称输入框失去焦点（blur事件）时，触发验证。如果验证不通过，则显示错误提示'名称已存在'。

输入框与后台重复验证

类似于上面的名称重复验证，如果需要在输入框失去焦点时向后台发送请求并获取响应的结果进行验证，则可以将验证器改写为通过Ajax请求获取返回数据并进行验证的形式。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="名称">
      <el-input v-model="form.name"></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: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { validator: this.checkName, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单数据了
        }
      })
    },
    checkName(rule, value, callback) {
      // 发送Ajax请求到后台验证名称是否重复
      axios.post('/api/checkName', { name: value })
        .then(res => {
          if (res.data.result) {
            callback(new Error('名称已存在'))
          } else {
            callback()
          }
        })
        .catch(err => {
          // 处理错误
        })
    }
  }
}
</script>

在上述代码中，我们通过在checkName验证器中，使用axios库向后台发送请求验证名称是否重复。

特殊字符、字符长度验证

除了上述的重复性验证之外，表单验证还可以用来验证输入的数据是否符合预期格式，比如字符长度、是否包含特殊字符等。Element UI内置了一些验证函数，如min、max、email等。同时也可以自己设置正则表达式进行验证。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="名称">
      <el-input v-model="form.name"></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: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '只能输入英文和数字', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单数据了
        }
      })
    },
  }
}
</script>

在上述代码中，我们利用了Element UI提供的验证函数进行了特殊字符和字符长度的验证。使用min、max选项来规定名称长度的范围，使用pattern模式来限定只能输入英文字母和数字。

注意事项

最后，我们需要注意以下两点：

• 必须为表单元素设置name属性，例如<el-input v-model="form.name" name="name"></el-input>，否则可能会出现无法通过验证的情况。
• 一个表单元素只需要验证一次，因此在验证不通过之后，需要等待用户对其做出改变之后再次进行验证。这个功能可以通过设置trigger来实现。例如，在上述例子中，我们使用了trigger: 'blur'来在输入框失去焦点时进行验证。

到此为止，我们已经对Element UI中的表单验证进行了较为详细的讲解。如果您还有其他关于Vue和Element UI的问题，欢迎再次提问。