返回

你想要的ElementUI输入框不同用户校验功能，一次讲清！

前端

关于输入框校验这个问题，其实是老生常谈的问题。相关的工具包有很多，如果我们使用饿了么UI，也可以用el-form中的简单的校验。一般来说如果使用elementui的话，就大概率是做后台管理系统的，说道后台管理系统，就要说道权限问题。即：不同的用户看到的、可操作的不同。

ElementUI的校验功能非常强大，我们可以通过设置不同的校验规则，来对不同用户的输入进行校验，从而确保数据的准确性和完整性。

### 1. 如何设置校验规则？

首先，我们需要在el-form组件中设置校验规则，方法如下：

```html
<el-form :model="form" :rules="rules">
  <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>
```

在上面的代码中，我们通过rules属性设置了校验规则。rules属性是一个对象，它的key是校验字段的prop值，它的value是一个数组，数组中存放着校验规则。

校验规则是一个对象，它可以包含以下属性：

* required：是否必填。
* type：校验类型，可以是string、number、email、url、date、array等。
* min：最小值。
* max：最大值。
* minlength：最小长度。
* maxlength：最大长度。
* pattern：正则表达式。

例如，我们可以设置以下校验规则：

```js
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { minlength: 3, message: '用户名最少3个字符', trigger: 'blur' },
    { maxlength: 20, message: '用户名最长20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { minlength: 6, message: '密码最少6个字符', trigger: 'blur' },
    { maxlength: 20, message: '密码最长20个字符', trigger: 'blur' }
  ]
}
```

### 2. 如何校验表单？

当我们点击提交按钮时，我们可以调用submitForm方法来校验表单，方法如下：

```js
submitForm() {
  this.$refs['form'].validate((valid) => {
    if (valid) {
      // 表单校验通过，提交表单
    } else {
      // 表单校验不通过，提示错误信息
    }
  });
}
```

在上面的代码中，我们通过$refs['form'].validate()方法来校验表单。如果表单校验通过，我们将提交表单。如果表单校验不通过，我们将提示错误信息。

### 3. 如何实现不同用户校验项不同？

如果我们想实现不同用户校验项不同，我们可以通过设置不同的校验规则来实现。例如，我们可以为管理员用户设置更严格的校验规则，为普通用户设置更宽松的校验规则。

我们可以通过以下方法来设置不同用户校验项不同：

1. 在el-form组件中设置不同的rules属性。
2. 在submitForm方法中，根据不同的用户类型来调用不同的校验方法。

例如，我们可以设置以下代码：

```html
<el-form :model="form" :rules="rules">
  <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>
```

```js
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { minlength: 3, message: '用户名最少3个字符', trigger: 'blur' },
    { maxlength: 20, message: '用户名最长20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { minlength: 6, message: '密码最少6个字符', trigger: 'blur' },
    { maxlength: 20, message: '密码最长20个字符', trigger: 'blur' }
  ]
}
submitForm() {
  if (this.currentUserType === 'admin') {
    this.$refs['form'].validate((valid) => {
      if (valid) {
        // 表单校验通过，提交表单
      } else {
        // 表单校验不通过，提示错误信息
      }
    });
  } else {
    this.$refs['form'].validate((valid) => {
      if (valid) {
        // 表单校验通过，提交表单
      } else {
        // 表单校验不通过，提示错误信息
      }
    });
  }
}
```

在上面的代码中，我们根据currentUserType来判断当前用户类型。如果当前用户类型是管理员，我们将使用更严格的校验规则。如果当前用户类型是普通用户，我们将使用更宽松的校验规则。

这样，我们就实现了不同用户校验项不同。