当前位置: 首页 > news >正文

【Vue中给输入框加入js验证_blur失去焦点进行校验】

【Vue中给输入框加入js验证_blur失去焦点进行校验】
通俗一点就是给输入框加个光标离开当前文本输入框时,然后对当前文本框内容进行校验判断
具体如下:
1.先给文本框加属性 @blur=“validatePhoneNumber”

<el-input v-model=“entity.telephone” @blur=“validatePhoneNumber” :disabled=“disabled”>

{{ errorText }}



2.在data中对需要值进行默认赋值,或者称之为自定义
在这里插入图片描述

telephone:‘’,
phoneNumber: ‘’,
isValid: true,
errorText: ‘请输入正确的手机号码’ ,
isPhoneValid: true,
3.在method中自定义校验的方法
在这里插入图片描述

 validatePhoneNumber() {  const resg1=/^1[3456789]\d{9}$/;this.isValid = resg1.test(this.entity.telephone);  if (!this.isValid) {  alert(this.errorText);  }  
} 
http://www.lryc.cn/news/263701.html

相关文章:

  • vue3项目引入电子签名(可横屏竖屏)
  • mysql中count(*)、count(1)、count(主键)、count(字段)的区别
  • Nginx生成自签名证书从而添加域名的HTTPS访问
  • 无框架Java转go语言写http与tcp请求
  • 【Git】Git基本操作
  • JavaSE学习笔记 Day20
  • 【蓝桥杯选拔赛真题52】python空调模式 第十四届青少年组蓝桥杯python 选拔赛比赛真题解析
  • Android Studio: 解决Gradle sync failed 错误
  • 【手写数据库】从零开始手写数据库内核,行列混合存储模型,学习大纲成型了
  • 机器学习中的一些经典理论定理
  • c语言:成本100元,40%的利润怎么计算|练习题
  • 【Python必做100题】之第二十二题(复制列表)
  • Java 数据结构篇-实现堆的核心方法与堆的应用(实现 TOP-K 问题:最小 k 个数)
  • startUML6.0.1破解方法
  • Python实现多种图像分割方法:基于阈值分割和基于区域分割
  • SQL学习笔记+MySQL+SQLyog工具教程
  • SpringBoot的日志管理
  • leetcode---76. 最小覆盖子串 [C++/滑动窗口+哈希表]
  • Kafka 分级存储在腾讯云的实践与演进
  • 域架构下的功能安全思考
  • python多线程介绍
  • 征文榜单 | 腾讯云向量数据库获奖名单公布
  • 如何预防[[MyFile@waifu.club]].wis [[backup@waifu.club]].wis勒索病毒感染您的计算机?
  • 中国风春节倒计时【实时倒计时】
  • 基于RBAC的k8s集群权限管控案例
  • 【华为数据之道学习笔记】5-11 算法模型设计
  • Flink系列之:SELECT WHERE clause
  • C#基础——委托、Action和Func的使用
  • 不止业务缓存,分布式系统中还有哪些缓存?
  • Java 基础学习(十三)集合框架、List集合