Vue之el-form表单校验以及常用正则详解

前言

在前后端分离的web开发中，前端负责数据的采集、交互等操作。在web表单中，数据的准确性、合法性都需要得到保障，因此加入表单校验机制，不仅可以规范数据的格式，降低后端的数据处理难度，也能增强用户的体验感。

Vue是一套渐进式的JavaScript框架，本文主要介绍Vue中的表单校验以及常用正则的运用。

el-form表单校验

el-form是ElementUI中表单的基础，它提供了丰富的校验方法，校验结果的反馈能够直接给出错误提示，并且可以根据需要进行自定义校验。接下来，我将详细介绍如何在Vue中使用el-form表单校验。

使用步骤

第一步：安装ElementUI

打开命令行，输入以下命令：

npm install element-ui -S

第二步：引入ElementUI

在main.js中引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三步：使用el-form

在Vue组件中，引入el-form和el-form-item组件，el-form-item用来包含表单的各个输入框，el-form则用来进行表单数据的提交和校验，设置具体的代码和参数如下：

<el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
  <el-form-item label="用户名" prop="name">
    <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
</el-form>

代码解释：

el-form标签中的model绑定了Vue对象中的ruleForm属性，即表单中每个input对应的数据。
:rules属性为el-form表单校验规则，是一个对象数组，包含了每个输入框需要校验的规则。
label-width属性是标签的宽度。
el-form-item中的prop对应model中的属性，即required校验需要对应的model也存在。

第四步：定义校验规则

为了使el-form实现表单校验，需要为表单输入框编写相关的规则。账号密码等的校验规则采用ElementUI常用的校验规则。例如：

export default {
  data () {
    return {
      ruleForm: {
        name: '',
        email: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入账户名', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('提交成功');
        } else {
          return false;
        }
      });
    }
  }
};

第五步：提交表单

通过监听表单提交按钮的点击事件，调用validate方法进行表单的校验，如果校验通过则执行相关操作，否则阻止表单的提交。

methods: {
  submitForm(formName) {
    this.$refs[formName].validate(valid => {
      if (valid) {
        alert('提交成功');
      } else {
        return false;
      }
    });
  }
}

注意事项

注意将input的v-model与el-form中的model绑定。
校验规则要写在规则数组中，并按照需要进行校验。
el-form Item组件中prop绑定的值需要在model中存在。

以上就是如何使用el-form进行表单校验，接下来将为大家讲解具体的应用场景。

示例一

如何校验两个输入框中的密码是否一致？这是一个比较常见的场景。

首先，我们需要在规则数组中增加validator属性，来实现自定义规则校验。

rules: {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirm: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: sameAsPassword, trigger: 'blur' }
  ]
}

其中sameAsPassword为自定义的校验方法。它接收三个参数，分别是表单输入框的值、第二个输入框的值和回调函数。规则返回值为true或false，表示校验成功或失败。

function sameAsPassword(rule, value, callback) {
  if (value !== this.ruleForm.password) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
}

上述代码中，所传参中的“this”指向Vue组件实例，因此可以访问到它的ruleForm。

示例二

我们还可以增加自定义规则，例如限制用户输入的字符不能包含特殊字符。

rules: {
  name: [
    { required: true, message: '请输入账号名', trigger: 'blur' },
    { validator: validUsername, trigger: 'blur' }
  ]
}

validUsername方法的实现如下：

function validUsername(rule, value, callback) {
  const reg = /^[a-zA-Z0-9_-]{4,16}$/;
  if (!reg.test(value)) {
    callback(new Error('账号格式不正确'));
  } else {
    callback();
  }
}

根据以上示例，我们详细介绍了el-form在Vue中的使用，实现了常见的表单检验功能。下一步开始介绍常用正则表达式。

常用正则详解

在表单校验以及数据处理中，常用的正则表达式用于匹配、查找、查找和替换等文本操作，它们都可以使用JavaScript的RegExp对象来实现。接下来，我将为你介绍一些常用的正则表达式。

匹配数字

用于匹配整数或浮点数：

/^(\d+)(\.\d+)?$/

用途：

用来匹配单个整数或浮点数，如：

/^(\d+)(\.\d+)?$/.test('123'); // true 
/^(\d+)(\.\d+)?$/.test('12.12'); // true
/^(\d+)(\.\d+)?$/.test('12.0000'); // true
/^(\d+)(\.\d+)?$/.test('abc'); // false

匹配电话号码

用于匹配电话号码：

/^\d{3}-\d{8}|\d{4}-\d{7,8}$/

用途：

用来匹配中国大陆的电话号码，如：

/^\d{3}-\d{8}|\d{4}-\d{7,8}$/.test('010-11111111'); // true
/^\d{3}-\d{8}|\d{4}-\d{7,8}$/.test('021-88888888'); // true
/^\d{3}-\d{8}|\d{4}-\d{7,8}$/.test('010-1111111'); // false
/^\d{3}-\d{8}|\d{4}-\d{7,8}$/.test('011-11111111'); // false

匹配用户名

用户名匹配：

/^[a-zA-Z0-9_-]{4,16}$/

用途：

指用户名在 4 到 16 位之间，并且只能由字母、数字、_ 或 - 组成，如：

/^[a-zA-Z0-9_-]{4,16}$/.test('a123456789aaaaa'); // false
/^[a-zA-Z0-9_-]{4,16}$/.test('a123'); // false
/^[a-zA-Z0-9_-]{4,16}$/.test('a_123'); // true
/^[a-zA-Z0-9_-]{4,16}$/.test('$$$$$'); // false

匹配邮箱地址

邮箱地址匹配：

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

用途：

用来匹配电子邮件地址，如：

/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test('user@example.com'); // true
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test('user.@example.com.com'); // false

匹配身份证号码

身份证号码匹配：

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/

用途：

用来匹配中国大陆的公民身份证号码，如：

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test('13098119881002926X'); // true

上述就是几种常用的正则表达式及它们的用途。

总结

本文简单介绍了Vue中表单校验的使用方法，以及常用的正则表达式。在表单校验中，我们使用了ElementUI中的el-form组件，它提供了丰富的功能和自定义扩展，非常方便实用。希望本文对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue之el-form表单校验以及常用正则详解 - Python技术站

vue之el-form表单校验以及常用正则详解