Vue.js之限制输入方式方法集锦

最新推荐文章于 2024-04-07 17:37:50 发布

`Seven

最新推荐文章于 2024-04-07 17:37:50 发布

阅读量843

点赞数

分类专栏： ——【Vue.js】

本文链接：https://blog.csdn.net/SevenGirl2017/article/details/88933514

版权

——【Vue.js】专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文介绍了Vue.js中限制输入方式的两种方法：输入时判断和输入完成后判断，并详细讲解了限制输入内容的两种形式，提供了核心代码和整体样式的参考。

摘要由CSDN通过智能技术生成

Vue.js之限制输入方式方法集锦

限制输入方式

输入时判断

<template>
  <div>
    <card>
      <Input
        style="width: 200px;"
        placeholder="请输入内容"
        @on-keyup="btKeyUp"
        @on-keydown="btKeyDown"
      />
      
    </card>
  </div>
</template>

<script>
export default {
  methods: {
    // 只能输入汉字、英文、数字
    btKeyDown(e) {
       e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
    },
    //限制输入特殊字符
    btKeyUp(e) {
       e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,"");
    }
  }
};
</script>

输入完成后判断

核心代码

var reg = /^[0-9]+$/;
if (!reg.test(num)) {
  this.$Message.info("请输入数字");
}

整体样式

<template>
  <div>
    <card>
      <Input
        v-model="num"
        style="width: 200px;"
        placeholder="请输入内容"
      />
      <Button type="primary" @click="BtnNum">验证</Button>
    </card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data () {
   return {
     num:''
   }
  },
  methods: {
    BtnNum() {
      var vm = this;
      var num = vm.num;
      var reg = /^[0-9]+$/;
      if (!reg.test(num)) {
        vm.$Message.info("请输入数字");
      }
    }
  }
};
</script>

限制输入内容

形式一

// 只能输入汉字
var reg = /^[\u0391-\uFFE5]+$/;
// 只能输入英文字母
var reg = /^[a-zA-Z]*$/;
// 只能输入数字
var reg = /^[0-9]+$/;
// 只能输入英文字母、数字
var reg = /^[0-9a-zA-Z]*$/;
// 邮箱验证
var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
// 手机号验证
var reg = /^(13[0-9]|14[56789]|15[0-3,5-9]|166|17[0135678]|18[0-9]|19[89])\d{8}$/;

形式二

// 不能输入特殊字符
e.target.value = e.target.value.replace(/[^u4e00-u9fa5w]/g,"");
// 只能输入数字
e.target.value = e.target.value.replace(/[^0-9]/g,"");
// 只能输入数字、小数点
e.target.value = e.target.value.replace(/[^\0-9\.]/g,"");
// 只能输入英文
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z]/g,"");
// 只能输入英文、数字
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9]/g,"");