vue如何制作自定义表单校验样式

vue如何制作自定义表单校验样式

先上效果图

由于vue的优越性，所以衍生出很多与之匹配并非常受欢迎的ui组件库，比如最常见的element-ui和antvue，两者内容几乎相同，样式略有差异，所以在制作一款后台管理系统的时候，表单与表格非常重要，对于表单的验证，出于开发效率的原因上我们通常会直接引用这些组件库中的内容，对于这些封装好的组件我们可以通过穿透(深层)样式或是定制样式的方法去修改，但对于一些个性化较强的样式，这样的修改显然很费劲，所以对于这些例如登录/注册或是其他类个性化较强的表单，我们可以自定义去制作

下面说思路，其实JavaScript中关于表单验证的正则表达式有很多很多，各种各样组合的形式校验都有，这里我只给大家列举一些比较常见的校验规则

/*用户名要求 数字、字母、下划线的组合，其中数字和字母必须同时存在*/
/^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{6,12}$/

/* 手机号 13开头、15开头（154除外）、180、186~189开头的*/
/^(13\d|15[0-3]|15[4-9]|180|18[6-9])\d{8}$/

/*密码：8-12位，由字母数字下划线组成 */
 /^[\w]{8,12}$/

/* 身份证号 */
/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/

/* 邮箱 */
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.\w+)+$/

有了这些校验规则后，我们明确一个事情，我们通常看到的校验规则下面的错误提示文字，例如

通常是我们点击输入框外面的时候它才会蹦出这个错误提示，所以我们要监听输入框失去焦点时候触发的事件 @blur(v-on:blur)，也就是当光标移除输入框时会触发的事件，所以现在思路清晰了

上代码

<input type="text" placeholder="用户名需由字母数字下划线组成" v-model="regaccount" @blur="AccBlurOn" />

首先我们要在data中声明输入框双向绑定的数据(v-model)，这里是regaccount，之后监听输入框失去焦点的事件
，之后我们还要书写错误提示的文本框

<span v-if="regaccountDis1">用户名不能为空</span>
<span v-if="regaccountDis2">用户名格式不正确</span>

这里使用v-if是因为虽然v-if具有更好的切换开销，但不会占取页面位置，并且在这个页面当中，需要的切换也并不是很多
同样两个v-if绑定的布尔值变量声明为false，即不创建该实例

之后我们在上方监听输入框失去焦点的方法中写入如下代码

AccBlurOn () {
      const AccReg = /^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{6,12}$/
      if (this.regaccount === '') {
        this.regaccountDis1 = true
      } else {
        this.regaccountDis1 = false
        if (!AccReg.test(this.regaccount)) {
          this.regaccountDis2 = true
        } else {
          this.regaccountDis2 = false
        }
      }
    }

第一句是声明校验规则，第二个if判断中的.test()方法是JavaScript中用来匹配字符串规则的方法

这样这个简单的校验就完成了，后面的几个校验原理相同

希望这篇文章可以帮助到你