vue--输入框校验方法

输入框校验方法

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事件：当input的value值发生变化时就会触发，（与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