element多个表单校验的实现

我们来详细讲解一下如何通过element实现多个表单校验。

确定要校验的表单

首先，需要确定需要进行校验的表单。可以根据业务需求，选择需要进行校验的表单元素。例如，我们需要对登录表单的“用户名”和“密码”两个表单元素进行校验。

导入element UI

接下来，引入element UI的表单校验组件。在Vue.js项目中，通常可以在main.js文件中引入element UI，示例如下：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

构建校验规则对象

要对表单进行校验，需要定义校验规则。校验规则以对象的形式存在，规则对象定义的属性名需要与表单元素的v-model绑定的属性名相同。我们以“用户名”为例，定义相应的规则对象：

//校验规则对象
const rulesObj = {
  username: [
    { required: true, message: '请填写用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在3~12个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6~20个字符之间', trigger: 'blur' }
  ]
};

该规则对象中，username和password分别对应了用户名和密码两个表单元素的v-model绑定的属性名。rulesObj中定义的每个属性名的值是一个数组，包含了对应表单元素需要校验的规则。

将校验规则对象传递给表单元素

构建好校验规则对象后，将校验规则对象赋给需要进行校验的表单元素。我们以element UI中的el-form表单组件为例。

<el-form ref="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="handleSubmit">登录</el-button>
  </el-form-item>
</el-form>

在上述HTML代码中，:rules绑定了校验规则对象，每个<el-form-item>元素中使用prop绑定了该表单元素要校验的规则属性名。这里，用户名对应的prop属性为username，密码对应的prop属性为password。

编写表单提交处理函数

当用户提交表单时，需要进行表单校验。为了实现表单的提交功能，我们需要在Vue中编写一个表单提交处理函数。该函数中，使用this.$refs.name.validate()方法进行表单校验。如果校验通过，则继续执行提交表单的操作。

methods: {
  handleSubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        //此处为表单提交的操作
        ...
      } else {
        this.$message.error('表单校验不通过')
      }
    })
  }
}

在上述代码中，使用this.$refs.form.validate()方法进行表单校验。validate()方法返回一个布尔值，表示表单是否通过校验。如果校验失败，则使用this.$message.error()方法提示用户表单校验不通过。

示例1：校验表单元素的相等性

我们可以通过自定义校验规则的方式，来对表单元素进行相等性校验。例如，校验两个密码输入框的值是否相同。

我们在校验规则对象rulesObj中，新增一个属性password2，表示第二个密码输入框需要校验的规则。

//校验规则对象
const rulesObj = {
  username: [
    { required: true, message: '请填写用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在3~12个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6~20个字符之间', trigger: 'blur' }
  ],
  password2: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请确认密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    } }
  ]
};

在规则对象中，password2规则属性包含了两个校验规则。第二个密码输入框需要输入的值，在提交时将随表单一起提交。表单中第一个密码输入框的值则通过this.form.password获取。

接下来，将需要进行校验的表单元素绑定该规则，<el-input>组件中的v-model属性绑定了表单元素需要校验的规则属性名。

<el-form ref="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 label="确认密码" prop="password2">
    <el-input type="password" v-model="form.password2"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSubmit">登录</el-button>
  </el-form-item>
</el-form>

使用validator自定义校验规则，并在规则中校验两个密码输入框的值是否相同。如果不相同，则使用callback(new Error('两次密码输入不一致'))方法提示用户两次密码输入不一致。

示例2：异步校验

除了对表单元素进行同步校验，我们还可以对表单元素进行异步校验，例如：校验用户名是否重复。

假设我们的后端API接口地址为/api/checkUsername，该接口需要传递一个参数username，表示要检查的用户名，如果该用户名已存在，则返回失败，否则返回成功。

我们在校验规则对象rulesObj中，新增一个属性username2，表示第二个用户名输入框需要校验的规则。

//校验规则对象
const rulesObj = {
  username: [
    { required: true, message: '请填写用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在3~12个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6~20个字符之间', trigger: 'blur' }
  ],
  username2: [
    { required: true, message: '请填写用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '用户名长度在3~12个字符之间', trigger: 'blur' },
    //异步校验
    { validator: (rule, value, callback) => {
      setTimeout(() => {
        if (value === 'admin') {
          callback(new Error('该用户名已存在'))
        } else {
          callback()
        }
      }, 1000)
    }, trigger: 'blur' }
  ]
};

在规则对象中，username2规则属性需要进行异步校验，使用setTimeout()模拟一个异步请求，1秒钟后返回成功或失败结果，调用相应的callback方法。

接下来，将需要进行校验的表单元素绑定该规则，<el-input>组件中的v-model属性绑定了表单元素需要校验的规则属性名。

<el-form ref="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 label="确认密码" prop="password2">
    <el-input type="password" v-model="form.password2"></el-input>
  </el-form-item>
  <el-form-item label="用户名2" prop="username2">
    <el-input v-model="form.username2"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="handleSubmit">登录</el-button>
  </el-form-item>
</el-form>

使用validator自定义异步校验规则，模拟异步请求，1秒钟后返回成功或失败结果。

总结

通过上述步骤，就可以实现对多个表单元素进行校验的功能。其中，通过定义校验规则对象，对同步和异步校验规则进行定义，并将校验规则对象绑定到表单元素上。在表单提交处理函数中，使用validate()方法对表单进行校验，并根据校验结果进行处理。除了以上两个示例，我们还可以根据业务需求定义更多的校验规则，实现表单的自定制和扩展。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：element多个表单校验的实现 - Python技术站