具體代碼如下所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" rel="external nofollow" ></head><body ><div id="app"> <!--此處model的abc 要是下面input 綁定的對(duì)象名稱, ref 要和提交按鈕的submit參數(shù) 名稱要一致--> <el-form size="mini" :model="abc" ref="validateRef"> <!--此處的prop 和input 中abc的屬性名稱一致 --> <el-form-item label="你好" prop="hello" :rules="[{required: true,message:'請(qǐng)輸入',trigger:'blur'} ,{validator:validateCharacter,trigger:'blur'} ,{validator:validateFontSize,trigger:'blur'} ,{validator:validatePass,trigger:'blur'}]"> <el-input type="text" v-model="abc.hello" placeholder="請(qǐng)輸入..." clearable></el-input> </el-form-item> </el-form> <el-button @click="submit('validateRef')" type="primary" :loading="submitLoading">提交</el-button></div><!-- import Vue before Element --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script> var context=[[${#request.getContextPath()}]]; var ArrayMap = new Vue({ el: '#app', data: function () { return { abc: { hello: '', }, submitLoading:false, } }, methods: { //特殊字符過(guò)濾 checkSpecificKey(str) { var specialKey = "[`~!#$^&*()=|{}':;',//[//].<>/?~！#￥……&*（）――|{}【】‘；：”“'。，、？]‘'"; for (var i = 0; i < str.length; i++) { if (specialKey.indexOf(str.substr(i, 1)) != -1) { return false; } } return true; }, //驗(yàn)證字符串 validatePass(rule,value,callback){ var that=this; $.ajax({ url:context+"/abc?name="+that.abc.hello, type:"GET", async:false, dataType:"json", contentType:"application/json;charset=UTF-8", data:{} }).done(function(resp){ if(resp.data.isTrue){ callback(); }else{ callback(new Error("名稱重復(fù),請(qǐng)重新輸入")) } }) }, //驗(yàn)證字符串 validateFontSize(rule,value,callback){ if(value.length<30){ callback(); }else{ callback(new Error("字符串長(zhǎng)度在1-30之間")) } }, //驗(yàn)證字符串 validateCharacter(rule,value,callback){ if(this.checkSpecificKey(value)){ callback(); }else{ callback(new Error('請(qǐng)不要輸入特殊字符:[`~!#$^&*()=|{}/':;/',//[//].<>/?~！#￥……&*（）――|{}【】‘；：”“/'。，、？]‘/'')) } }, submit(data) { this.submitLoading=true, this.$refs[data].validate((valid) => { if (valid) { //驗(yàn)證成功,提交 return true; } else { //驗(yàn)證失敗返回 return false; } ; }) }, }, })</script></body></html>下面看下vue-element 輸入框驗(yàn)證
1.控制輸入位數(shù)
限制輸入為10位，這種方式可以使輸入框中輸入10位后不能輸入后續(xù)內(nèi)容
因?yàn)閚umber輸入框自動(dòng)將最后一位小數(shù)點(diǎn)忽略不計(jì)，因此“.”,"2.","3.3."這三種情況均為正確的輸入
<el-form-item label="渠道：" prop="channelName"> <el-input v-model="formData.channelName" :maxlength="10" placeholder="請(qǐng)輸入渠道名稱"></el-input></el-form-item>rules:{ channelName:[ {required:true,message:'渠道名稱不能為空',trigger:'change'}, ], }2.控制小數(shù)輸入位數(shù)
input 設(shè)置類型為number,step控制步長(zhǎng)，正則表達(dá)式匹配輸入的格式必須為xxx.xxx.
注意，此種方法無(wú)法區(qū)分不輸入的情況，故將提示信息合并為一個(gè)。
統(tǒng)一觸發(fā)方式為change
<el-form-item label="短信單價(jià)：" prop="price" class="form-price"> <el-input type="number" step="0.001" v-model="formData.price" placeholder="請(qǐng)輸入"></el-input></el-form-item>//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'} ]總結(jié)
以上所述是小編給大家介紹的element vue validate驗(yàn)證名稱重復(fù) 輸入框與后臺(tái)重復(fù)驗(yàn)證 特殊字符 字符長(zhǎng)度 及注意事項(xiàng)小結(jié)【實(shí)例代碼】，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
