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中用来匹配字符串规则的方法

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

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

vue如何制作自定义表单校验样式相关推荐

基于springboot+vue的开源自定义表单问卷系统
一.项目简介基于springboot+vue的开源自定义表单问卷系统二.实现功能支持表单拖拽支持各种控件操作(基础组件.进阶组件等) 基础组件包含文本.多行文本.图片.图形.日历控件支持拖拽 ...
vue同步请求 + vant表单校验
Vue同步请求 1. Vue同步请求 2. Vant2 表单校验 2.1 全局校验 2.1 自定义函数校验 1. Vue同步请求 async getIsoPersonInfo(id){await is ...
antd 自定义表单校验规则
html部分 <a-form-item name="username"><a-input v-model:value="loginForm.userna ...
织梦后台自定义表单，样式美化
先上图为快 (1)修改数据表dede_diyform1,内容的字段为nr,数据类型text:数据表结构如下 CREATE TABLE `dede_diyform1` (`id` int(10) uns ...
antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证
一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功二.思路 ...
vue+elementUI实现自定义表单模板组件（一）
前言如下图,实现一个可以自定义的表单.本文以实现思路为主,并未提供完整代码. 思路 1.页面布局为左中右布局:左边显示可以定义的表单控件,中间显示预览效果,右边则为选中某个控件后可以编辑的属性.如下 ...
vue+elementUI实现自定义表单模板组件（二）
前言在上一节主要解决了表单模板的创建问题,在数据库中的存储格式为字符串. 主要是通过前端处理,保存为 json 数组的字符串,形如 [{label:"文本",required:t ...
springcloudspringboot+vue+elementui+flowable+自定义表单+VUE流程设计器
源码 springboot:https://gitee.com/zjm16/zjmzxfzhl springcloud:https://gitee.com/zjm16/zjmzxfzhl-cloud ...
vue自定义表单校验
1.绑定规则 1.在form上绑定规则 :rules="formValidate" 实现规则 var jiaoyan=(rules, value,callback)=>{if ...

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

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

vue如何制作自定义表单校验样式相关推荐

最新文章

热门文章