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 = falseif (!AccReg.test(this.regaccount)) {this.regaccountDis2 = true} else {this.regaccountDis2 = false}}}
第一句是声明校验规则,第二个if判断中的.test()方法是JavaScript中用来匹配字符串规则的方法
这样这个简单的校验就完成了,后面的几个校验原理相同
希望这篇文章可以帮助到你