一、驗(yàn)證需求
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供沁陽網(wǎng)站建設(shè)、沁陽做網(wǎng)站、沁陽網(wǎng)站設(shè)計(jì)、沁陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、沁陽企業(yè)網(wǎng)站模板建站服務(wù)，十年沁陽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
對(duì)應(yīng)配置的關(guān)鍵詞輸入框，驗(yàn)證要求如下：
1、總字?jǐn)?shù)不能超過7000個(gè)；
2、去除配置的關(guān)鍵詞特殊符號(hào)，得到的關(guān)鍵詞組數(shù)不能超過300；(如：aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符號(hào)，有5組)
3、單個(gè)關(guān)鍵詞長度不能超過20；(如：aaaaa&(bbb|ccc))，如果aaaaa長度超過20則提示)
二、解決方法
在關(guān)鍵詞輸入對(duì)應(yīng)的FormItem中加入一個(gè)prop屬性，作為驗(yàn)證字段使用；注意該FormItem是包含于Form的；
form表單中添加rules驗(yàn)證
由于iview對(duì)空和總長度可以直接定義驗(yàn)證規(guī)則，所以這里就只自己寫其余2個(gè)，代碼如下：
重慶分公司
重慶分公司
//高級(jí)配置驗(yàn)證
validateAdvancedFormItem: {
name: [
{required: true, message: '任務(wù)名稱不能為空', trigger: 'blur'},
{type: 'string', max: 20, message: '不能超過20個(gè)字符', trigger: 'blur'},
{validator: validNameExist, trigger: 'blur'}
],
groupId: [
{type: 'string', required: true, message: '請選擇任務(wù)分組', trigger: 'change'}
],
keywords: [
{required: true, message: '關(guān)鍵詞不能為空', trigger: 'blur'},
{type: 'string', max: 7000, message: '不能超過7000個(gè)字符', trigger: 'blur'},
{validator: validKeyWordsRule, trigger: 'blur'}
],
/* chooseSiteGroupList: [//todo 暫時(shí)注釋掉網(wǎng)站分組
{ required: true, type: 'array', min: 1, message: '請選擇網(wǎng)站分組', trigger: 'change' },
],*/
chooseInfoTypeList: [
{required: true, type: 'array', min: 1, message: '請選擇信息類型', trigger: 'change'},
],
warnNum: [
{required: true, message: '請?zhí)顚戭A(yù)警增量'},
],
warnUserList: [
{required: true, type: 'array', message: '請選擇預(yù)警人員', validator: validatewarnUser, trigger: 'change'},
],
},自定義驗(yàn)證規(guī)則方法：
//驗(yàn)證高級(jí)配置關(guān)鍵詞 規(guī)則
const validKeyWordsRule = (rule, value, callback) => {
var isExceedTwitenty = this.getAdvancedKeyWords();
var isExceedThreeHundreand = this.getAdvancedKeyWords();
if(isExceedTwitenty == 1) {
callback(new Error('配置單個(gè)關(guān)鍵詞長度不能超過20'))
} else if(isExceedThreeHundreand == 2) {
callback(new Error('配置關(guān)鍵詞個(gè)數(shù)不能超過300'))
} else {
callback();
}
};
//處理關(guān)鍵詞
getAdvancedKeyWords: function () {
var flag = -1;
if(this.dailyTaskItem.keywords != '' && this.dailyTaskItem.keywords.trim() != '') {
//判斷單個(gè)配置的關(guān)鍵詞長度是否大于20
var str = '';
for (var i = 0; i < this.dailyTaskItem.keywords.length; i++) {
str = str + this.dailyTaskItem.keywords.substr(i, 1).replace(/[\&|\||\!|\(|\)|\"]/, ' ');
}
var keywordArr = str.split(' ');
var resultArr = [];
for(var i in keywordArr) {
if(keywordArr[i] != '') {
resultArr.push(keywordArr[i])
if(keywordArr[i].trim().length > 20) {
flag = 1;
break
}
}
}
//.關(guān)鍵詞一共300個(gè)
if(resultArr.length > 300) {
flag = 2;
}
}
return flag;
},總結(jié)
以上所述是小編給大家介紹的vue中使用iview自定義驗(yàn)證關(guān)鍵詞輸入框問題及解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
