Vue 之 element 輸入框驗證及常用正則

1.控制輸入位數

限制輸入為10位，這種方式可以使輸入框中輸入10位后不能輸入后續內容
因為number輸入框自動將最后一位小數點忽略不計，因此“.”,"2.","3.3."這三種情況均為正確的輸入

<el-form-item label="渠道：" prop="channelName">
  <el-input v-model="formData.channelName" :maxlength="10" placeholder="請輸入渠道名稱"></el-input>
</el-form-item>

rules:{
       channelName:[
         {required:true,message:'渠道名稱不能為空',trigger:'change'},
       ],
}

2.控制小數輸入位數

input 設置類型為number,step控制步長，正則表達式匹配輸入的格式必須為xxx.xxx.
注意，此種方法無法區分不輸入的情況，故將提示信息合並為一個。統一觸發方式為change

<el-form-item label="短信單價：" prop="price" class="form-price">
    <el-input type="number" step="0.001" v-model="formData.price" placeholder="請輸入"></el-input>
</el-form-item>

//js
<script>
    let checkPrice = (rule,value,callback)=>{
        if(value){
          let rgx = /^\d+(\.\d{1,3})?$/;
          if(value.match(rgx)==null){
            return callback(new Error('請檢查輸入格式，不能為空，且最多三位小數'))
          }else{
            callback();
          }
        }
      };
      rules:{
         price:[
           {required:true,message:'請檢查輸入格式，不能為空，且最多三位小數',trigger:'change'},
           {validator:checkPrice,trigger:'change'}
         ]
      },
</script>

3.驗證時間控件選擇的時間是否在某個范圍

   let checkSendTime =  (rule, value, callback) => {
        let hour = value ? value.getHours() :0;
        if (value !== "") {
          if (hour < 8 || hour > 21) {
            return callback(new Error('請選擇8:00~22:00之間發送'));
          } else {
            callback();
          }
        }
      };
      sendTime:[
            {type:'date',required: true, message: '發送時間不能為空', trigger: 'blur'},
            {validator:checkSendTime,trigger:'blur'}
          ]

 

一些常用的正則

1.input中只能輸入數字 0-9

<el-input
                  v-model.trim="form.銀行賬號"
                  placeholder="請輸入"
                  style="width: 200px;"
                  @input="inputChange"
                ></el-input>
 
<script>
inputChange() {
      this.form.銀行賬號 = this.form.銀行賬號.replace(/[^\d]/g, '')     // 或者寫成 /[^0-9]/g
    }
</script>

2.去除空格

把獲取的input框中的值的空格去掉：

let text = el.currentTarget.innerText.replace(/\s+/g, '')    // + 表示1個或多個空格

3.去除字符串兩端的空格

this.inputValue = this.inputValue.trim()

4.清除“數字”和“.”以外的字符

'ss(ini123.ssss'.replace(/[^\d.]/g,'')    // 結果是"123."

5.第一個數是.就替換成空字符串

".1213.22323".replace(/^\./g, '')   // 結果："1213.22323"

6.把最后的.都去掉

'瑟瑟發抖.....'.replace(/\.*$/g,'')   // "瑟瑟發抖"

'瑟瑟發抖.....'.replace(/\.*$/g,'.')   // "瑟瑟發抖."  // 只保留一個點

"sfassadfs....sfsadfsa....".replace(/\.{2,}/g, '.')    //  只保留一個點，清除多余的

"......sss....sss...ssss...ssss".replace(/\./g, '')  // 把所有點都清除

7.匹配正整數或正小數

/^\d+(\.{0,1}\d+){0,1}$/         
/^[0-9]+([.]{1}[0-9]{1,2})?$/   // 這個比較靠譜小數是0位或者1位

8.匹配11位手機號

/^[1]+[0-9]{10}$/

9.匹配固定電話

/^0\d{2,3}-\d{7,8}$/

10.港澳居民來往內地通行證號碼

/^[0-9a-zA-Z][-]{1}[0-9]{6}[-]{1}\([0-9a-zA-Z]\)$/

11.文件名只能包含中文、英文、數字包括下划線

/^[\u4E00-\u9FA5A-Za-z0-9_.]+$/

12.條形碼要求大寫字母、數字

/^[0-9A-Z]+$/

13.匹配正整數不包括0

/^[1-9]\d*$/

14.匹配正整數包括0

/^\d+$/

15.匹配0-20位的中文

/^[\u4e00-\u9fa5]{0,20}$/