输入框校验方法

1、效果图:

在这里插入图片描述
在这里插入图片描述

2、布局:

<template>
  <div class="ff">
    <input type="text" v-model="val" @input="change" maxlength="10" />
    <span>*</span>
    <span v-show="flag">支持格式:纯数字</span>
  </div>
</template>

3、样式:

.ff{
    span{
        color: red;
        margin-left: 5px;
    }
}

4、功能逻辑:

data() {
 return {
    // 输入框v-model数据
    val: "",
    // 提示语显示与否的标志位,默认隐藏
    flag: false,
  };
},
methods: {
  change(e) {
    let a = e.target.value.replace(/[^\d]/g, "");
    // console.log(a, e.target.value)
    if (a != e.target.value) {
      this.flag = true;
    } else {
      this.flag = false;
    }
  },
},

5、知识点:

  1. oninput事件:当inputvalue值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了)

  2. v-show 指令:通过改变元素的 css
    属性(display)来决定元素是显示还是隐藏。当条件为true时显示元素,条件为false时元素样式被设置为 display: none隐藏掉。

  3. 功能逻辑:如果当前输入框的value值与校验后的value值不相等则显示提示语。

  4. 常见正则表达式:

// 纯数字
.replace(/[^\d]/g,'')
// 纯英文
.replace(/[^a-zA-Z]/g,'')
// 数字,小数点
.replace(/[^\d\.]/g,'')
// 数字,小数点,下划线
.replace(/[^\d\._]/g,'')
// 英文和数字
.replace(/[\W]/g,'') 
// 纯汉字
.replace(/[^\u4E00-\u9FA5]/g,'')

扩展-4.1
扩展-4.2

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐