1. Python技术站首页
  2. 其他
  3. JavaScript

element多个表单校验的实现

• JavaScript

我们来详细讲解一下如何通过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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Javascript 面向对象 继承

    JavaScript 是一门面向对象的编程语言，因此在 JavaScript 中实现继承的方式和其他面向对象编程语言如 Java 和 Python 有些区别。下面是一个完整的 JavaScript 面向对象继承攻略，示例说明了两种常用的继承方式。 1. 构造函数继承 构造函数继承是通过在子类构造函数中调用父类构造函数来继承父类属性和方法，这种继承方式存在一个…

    JavaScript 2023年5月27日
    00

  • 老生常谈JavaScript数组的用法

    老生常谈JavaScript数组的用法 什么是JavaScript数组 JavaScript中的数组是一种数据结构，用来存储一组数据。数组中的每个数据项都有一个索引值，从0开始计数，可以通过索引值来访问数组中的元素。 声明和初始化一个数组 声明一个数组需要使用[]符号，数组的元素之间使用,进行分隔，可以同时存储任何类型的数据。 示例代码： const arr…

    JavaScript 2023年5月18日
    00

  • 基于javascript实现动态显示当前系统时间

    实现动态显示当前系统时间的方法之一是基于javascript语言。下面是基于javascript实现动态显示当前系统时间的攻略： 实现方法 要实现动态显示当前系统时间，可以使用以下步骤： 创建一个HTML页面，并在页面中添加一个<div>元素，用于容纳显示系统时间的内容。 在<div>元素中添加一个空的<span>元素，用…

    JavaScript 2023年6月10日
    00

  • 用jQuery将JavaScript对象转换为querystring查询字符串的方法

    将JavaScript对象转换为querystring查询字符串是前端开发中非常常用的操作之一，可以通过jQuery的$.param()方法实现。 具体步骤如下： 1.创建一个JavaScript对象，用于测试示例。 例如，现在有一个名为person的JavaScript对象： var person = { name: "Tom", ag…

    JavaScript 2023年5月27日
    00

  • 深入理解Javascript中this的作用域

    下面是针对“深入理解Javascript中this的作用域”的完整攻略： 1. this的基本概念 在 JavaScript 中，this 代表函数运行时的上下文环境，指向的是当前函数执行的对象。也就是说，this 的值是根据函数的调用方式而定的，有以下几种： 函数作为独立的函数调用时，this 指向全局对象，也就是 window（浏览器环境）或 globa…

    JavaScript 2023年6月10日
    00

  • ES6如何将 Set 转化为数组示例详解

    当需要将ES6 Set类型转化成数组进行处理时，我们可以使用一些内置的方法来完成这个过程。 使用Array.from()方法 const mySet = new Set(["hello", "world"]); const myArr = Array.from(mySet); console.log(myArr); 在…

    JavaScript 2023年5月27日
    00

  • JavaScript动态插入script的基本思路及实现函数

    JavaScript动态插入script的基本思路是通过创建一个script标签，然后将其添加到文档中。具体的实现可以使用以下的函数： function insertScript(url, callback) { var script = document.createElement(‘script’); script.type = ‘text/javasc…

    JavaScript 2023年5月27日
    00

  • js中unicode转码方法详解

    JS中Unicode转码方法详解 JavaScript中的字符串可以通过Unicode字符集来表示，其中每个字符都有对应的Unicode编码值。在一些场景下，我们需要将一些特殊字符或非ASCII字符转换成Unicode编码表示。因此，本文将详细讲解在JavaScript中实现Unicode编码和解码的方法。 Unicode编码 在JavaScript中，可以…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部