您的位置：首页 > 编程技术 > 正则表达式  >  正则表达式解决input框固定输入值得格式(金额,特殊字符)

正则表达式解决input框固定输入值得格式(金额,特殊字符)

 更新时间：2021年5月7日 16:35  点击：1814

在写输入用到input的时候，经常出现以下几种情况：

只能输入某。栗子：只能输入数字，只能输入字母（大写，小写）只能输入某固定格式。栗子：只能输入金额，只能输入小数且最多保留2位不能输入某。栗子：不能输入特殊字符，如“@#￥%&*”等

这种情况下，就需要直接在input上进行限制，在前端的应用中主要是用正则表达式来解决这些问题的

第一种情况：只能输入某

<template>
 <div id="app">
 {{value}}
 <el-input 
  v-model="value" 
  clearable
  size="small"
  class="row-value "
  @input="numCheck(value)"
  //这里我使用的是input，每输入一次就会检查，也可以使用change改变时检查或blur失去焦点时检查。
  >
  </el-input>
 </div>
</template>

<script>
 export default {
 name: "app",
 data() {
  return { 
  value:''
  };
 },
 methods: {
  numCheck(val){
  if(val != ''){
   if (/[^1-9]/.test(val)) {
   //如果不能输入数字就去掉^，/[1-9]/.test(val)
   //只能输入字母，/[^A-z]/.test(val)
   //只能输入字母或数字（如密码），/[^1-9A-z]/).test(val)
   this.$message({
    type: "error",
    message: "只能输入数字，请重新输入!"
   })
   this.value = ''
   }
  }
  }
 }
 };
</script>

第二种情况只能输入某固定格式

只能输入小于1的两位小数

if(value > 1){
	this.$message({
  type: "error",
  message: "请输入小于1的数!"
 })
 this.value = ''
 return
}
if (!(/^([0-9]*)+(.[0-9]{1,2})?$/).test(val)) {
 this.$message({
  type: "error",
  message: "请输入小于1的两位小数!"
 })
 this.value = ''
}

金额

if(value.length > 12){
	this.$message({
  type: "error",
  message: "长度超过12，请重新输入"
 })
 this.value = ''
 return
}
if(!(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/).test(value)){
	this.$message({
  type: "error",
  message: "只能输入数字，请重新输入!"
 })
 this.value = ''
}

第三种情况不要输入某

var patrn = /[`~!@#$%^&*_\-+=<>?"{}|\/;'\\[\]·~！@#￥%……&*————\-+={}|《》？“”【】‘'、]/gim;
if (patrn.test(val)) {
 this.$message({
  type: "error",
  message: "请勿输入特殊字符!"
 })

总结：好好学习正则表达式，超重要！！！

到此这篇关于正则表达式解决input框固定输入值得格式(金额,特殊字符)的文章就介绍到这了,更多相关input框固定输入值得格式内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • PHP正则表达式取双引号内的内容

    取双引号内的内容我们如果一个字符串中只有一个可以使用explode来获得，但如果有多个需要使用正则表达式来提取了，具体的例子如下。 写程序的时候总结一点经验，如何只...2016-11-25

  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题，忽然翻到有捕获组的概念，手册上也是一略而过，百度时无意翻到C#和Java中有对正则捕获组的特殊用法，搜索关键词有PHP时竟然没有相关内容，自己试了一下，发现在PHP中也是可行的，于是总结一下，分享的同...2015-11-08

  • php 验证只能输入汉字、英语、数字的正则表达式

    正则表达式是一门非常有用的并且进行模糊判断的一个功能了，我们下面来看通过正则来验证输入汉字、英语、数字，具体如下。 收藏了正则表达式。可以验证只能输入数...2016-11-25

  • java正则表达式判断前端参数修改表中另一个字段的值

    这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07

  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数，包括分钟，时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25

  • PHP正则表达式匹配验证提取网址URL实例总结

    网址规则是可寻的，所以我们可以使用正则表达式来提取字符串中的url地址了，下面一起来看看小编整理的几个PHP正则表达式匹配验证提取网址URL实例. 匹配网址 URL 的...2016-11-25

  • 正则表达式中两个反斜杠的匹配规则详解

    这篇文章主要介绍了正则表达式中两个反斜杠的匹配规则,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-07

  • C#正则表达式使用方法示例

    这篇文章主要介绍了C#正则表达式使用方法,大家参考使用...2020-06-25

  • JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别，非常不错，具有参考借鉴价值，需要的朋友参考下吧...2017-04-03

  • 常用C#正则表达式汇总介绍

    c#正则表达式,用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。...2020-06-25

  • JavaScript利用正则表达式替换字符串中的内容

    本文主要介绍了JavaScript利用正则表达式替换字符串中内容的具体实现方法，并做了简要注释，便于理解。具有一定的参考价值，需要的朋友可以看下...2017-01-09

  • 一文秒懂python正则表达式常用函数

    这篇文章主要介绍了python正则表达式常用函数及使用方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07

  • Idea使用正则表达式批量替换字符串的方法

    这篇文章给大家介绍了Idea使用正则表达式批量替换字符串的方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2021-07-21

  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题，忽然翻到有捕获组的概念，手册上也是一略而过，百度时无意翻到C#和Java中有对正则捕获组的特殊用法，搜索关键词有PHP时竟然没有相关内容，自己试了一下，发现在PHP中也是可行的，于是总结一下，分享的同...2015-11-08

  • C# 中使用正则表达式匹配字符的含义

    正则表达式的作用用来描述字符串的特征。本文重点给大家介绍C# 中使用正则表达式匹配字符的含义，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧...2020-06-25

  • Python验证的50个常见正则表达式

    这篇文章主要给大家介绍了关于利用Python验证的50个常见正则表达式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-11

  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容，实用性非常，感兴趣的朋友参考下吧...2016-05-06

  • js用正则表达式筛选年月日的实例方法

    在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法，对此有兴趣的朋友们可以学习下。...2021-01-04

  • layui 正则表达式验证使用实例详解

    layui的正则表达式是在form表单中完成的，这篇文章主要介绍了layui 正则表达式验证使用教程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07

  • javascript 手机号码正则表达式验证函数 <font color=red>原创</font>

    随着手机号码段的不断增加,以前网上的手机号码验证函数都不能那么完美的支持了，这里脚本之家编辑特为大家准备的一个简单的正则与手机验证的函数分析。...2021-05-07