下面看下vue-element 輸入框驗(yàn)證

1.控制輸入位數(shù)

限制輸入為10位，這種方式可以使輸入框中輸入10位后不能輸入后續(xù)內(nèi)容

因?yàn)閚umber輸入框自動(dòng)將最后一位小數(shù)點(diǎn)忽略不計(jì)，因此“.”,"2.","3.3."這三種情況均為正確的輸入

 

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

2.控制小數(shù)輸入位數(shù)

input 設(shè)置類(lèi)型為number,step控制步長(zhǎng)，正則表達(dá)式匹配輸入的格式必須為xxx.xxx.

注意，此種方法無(wú)法區(qū)分不輸入的情況，故將提示信息合并為一個(gè)。

統(tǒng)一觸發(fā)方式為change

  

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

3.驗(yàn)證時(shí)間控件選擇的時(shí)間是否在某個(gè)范圍

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

看完了這篇文章，相信你對(duì)“element vue validate驗(yàn)證名稱(chēng)重復(fù)的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！