iview驗證

From中定義   ref="passwordForm" 獲取dom節點  :model="passwordForm" 關聯表單數據對象 :rules="ruleValidate"關聯表單驗證規則

 

data return中

 

或者

  repeatCount:[{
                            required: true,
                            message: "請選擇效鏡像路徑",
                            trigger: "change"
                        },
                        {
                            type: 'string',
                            pattern: /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/,
                            message: '無效的次數',
                            trigger: 'blur'
                        }
                    ],

 

this.$refs[specificationForm].validate(valid => {

//validate表示     整個表單進行校驗，參數為檢驗完的回調，會返回一個 Boolean 表示成功與失敗，支持 Promise

if (valid) {

  return sucess；

} else {

this.$Message.error("請完善項目信息");

}

});

 

如果是form中循環table，驗證td，例子

<td class="td-cloidtempmange">
<FormItem :prop="`vals.${index}.key`" :rules='tempValidate.key'>
<Input v-model.trim="item.key" type="text" :maxlength="20" placeholder="請輸入文本" :disabled="isView" class="input-key-cloudtemp" />
</FormItem>
</td>

tempValidate:{
key:[
{required: true, message: '鍵值不能為空！', trigger: 'blur'},
],
},

 

 

1，表單驗證錯誤一直提示，，prop 需要與v-model中字段一致

 

-----------------------------------------------------------分割線--------------------------------------

表單懸浮文字提示

          <FormItem label="網絡配置" class="clasform">
            <span slot="label">
              <span>網絡配置</span>
              <Tooltip transfer :max-width="300">
                <Icon type="ios-help-circle-outline"/>
                <div slot="content">
                  <p>提供以下兩種配置方式：</p>
                  <p>a. 使用相同配置：對批量裸金屬主機統一配置相同的業務網絡拓撲；</p>
                  <p>b. 單個配置：對每台裸金屬主機逐一配置各自的業務網絡拓撲。</p>
                  <p>注意：</p>
                  <p>1. 裸金屬主機需有可用網卡用於配置業務網絡；</p>
                  <p>2. “使用相同配置”要求裸金屬主機之間網卡數量相同、網卡名稱相同；</p>
                  <p>3. 目前支持扁平網絡場景，且支持VLAN二層隔離；</p>
                  <p>4. 需提前將裸金屬設備所在的裸金屬集群掛載相應的二層網絡；</p>
                  <p>5. “單個配置”支持對每台裸金屬主機設置指定IP。</p>
                </div>
              </Tooltip>
            </span>
            <RadioGroup v-model="userForm.networkSet" @on-change="change_radio_network">
              <Radio label="是">
                <span>使用相同配置</span>
              </Radio>
              <Radio label="否">
                <span>單個配置</span>
              </Radio>
            </RadioGroup>
          </FormItem>

　　-----------------------------------------------------------分割線--------------------------------------

清楚校驗方法

setTimeout(() => {
this.userFormValidate.networkCad = [];
 this.userFormValidate.network = [];
 }, 10);