iview 表單相關
view表單驗證的步驟：
第一步：給 Form 設定屬性 rules :rules
第二步：同時給需要驗證的每個 FormItem 設定屬性 prop 指向對應欄位即可 prop=”“
第三步：注意：Form標籤裡面是 :model
第四步：注意：在Form標籤裡面必須新增 ref,相當於id,在此範圍內的表單驗證有效
第五步：在操作儲存按鈕時，新增方法，對整個表單進行校驗，引數為檢驗完的回撥，會返回一個 Boolean 表示成功與失敗
---------------------
<Form :label-width="100" ref='contractForm' :model='contractForm' :rules
<FormItem label='合同編號：' prop="contractNo">
<Input placeholder="請輸入合同編號" v-model='contractForm.contractNo'></Input>
</FormItem>
//data裡面，寫驗證
ruleValidate: {
contractNo:[
{ required: true, message: '合同編號不能為空', trigger: 'blur' },
],
}
//methods裡面，寫方法
addChange(name){
this.$refs[name].validate(valid => {
if (valid) {
}
});
</Form>
iview進行表單驗證select時候驗證失敗的問題：
用iview自帶的表單驗證select標籤的時候，一直驗證不通過，因為iview預設校驗資料型別為String，而我的select用的value是number型別的
ruleValidate: {
customer:[
{ required: true, message: '客戶名稱不能為空', trigger: 'blur',type:'number'},
],
}
view進行表單驗證時間日期驗證失敗的問題：
和下拉框一樣，日期的型別是data
ruleValidate: {
advance:[
{ required: true, message: '預送達時間不能為空', trigger: 'change' ,type: 'date'},
],
}
iview進行多重驗證的寫法：
多重驗證包括第一要驗不能為空，第二要驗證限制的一些長度，寫正則表示式等
ruleValidate: {
goodsNum: [
{ required: true, message: '數量不能為空', trigger: 'blur' },
{ type: 'string',pattern:/^(([1-9]\d{0,3})|0)(\.\d{0,2})?$/, message:'數量應為正浮點數且不超過9999.99', trigger:'blur'},
],
}
//高階配置驗證
validateAdvancedFormItem: {
name: [
{required:
true
, message:
'任務名稱不能為空'
, trigger:
'blur'
},
{type:
'string'
, max: 20, message:
'不能超過20個字元'
, trigger:
'blur'
},
{validator: validNameExist, trigger:
'blur'
}
],
groupId: [
{type:
'string'
, required:
true
, message:
'請選擇任務分組'
, trigger:
'change'
}
],
keywords: [
{required:
true
, message:
'關鍵詞不能為空'
, trigger:
'blur'
},
{type:
'string'
, max: 7000, message:
'不能超過7000個字元'
, trigger:
'blur'
},
{validator: validKeyWordsRule, trigger:
'blur'
}
],
/* chooseSiteGroupList: [//todo 暫時註釋掉網站分組
{ required: true, type: 'array', min: 1, message: '請選擇網站分組', trigger: 'change' },
],*/
chooseInfoTypeList: [
{required:
true
, type:
'array'
, min: 1, message:
'請選擇資訊型別'
, trigger:
'change'
},
],
warnNum: [
{required:
true
, message:
'請填寫預警增量'
},
],
warnUserList: [
{required:
true
, type:
'array'
, message:
'請選擇預警人員'
, validator: validatewarnUser, trigger:
'change'
},
],
},
自定義驗證規則方法：
//驗證高階配置關鍵詞 規則
const validKeyWordsRule = (rule, value, callback) => {
var
isExceedTwitenty =
this
.getAdvancedKeyWords();
var
isExceedThreeHundreand =
this
.getAdvancedKeyWords();
if
(isExceedTwitenty == 1) {
callback(
new
Error(
'配置單個關鍵詞長度不能超過20'
))
}
else
if
(isExceedThreeHundreand == 2) {
callback(
new
Error(
'配置關鍵詞個數不能超過300'
))
}
else
{
callback();
}
};
//處理關鍵詞
getAdvancedKeyWords:
function
() {
var
flag = -1;
if
(
this
.dailyTaskItem.keywords !=
''
&&
this
.dailyTaskItem.keywords.trim() !=
''
) {
//判斷單個配置的關鍵詞長度是否大於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
}
}
}
//.關鍵詞一共300個
if
(resultArr.length > 300) {
flag = 2;
}
}
return
flag;
},