vue-iview UI 為什么一進頁面就有校驗

關於iview表單驗證的問題

• iview表單驗證的步驟：

  • 第一步：給 Form 設置屬性 rules :rules
  • 第二步：同時給需要驗證的每個 FormItem 設置屬性 prop 指向對應字段即可 prop=”“
  • 第三步：注意：Form標簽里面是 :model
  • 第四步：注意：在Form標簽里面必須添加 ref,相當於id,在此范圍內的表單驗證有效
  • 第五步：在操作保存按鈕時，添加方法，對整個表單進行校驗，參數為檢驗完的回調，會返回一個 Boolean 表示成功與失敗。

   <Form :label-width="100" ref='contractForm' :model='contractForm' :rules="ruleValidate"> <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'}, ], } 

 

• iview進行表單驗證時間日期驗證失敗的問題：
  
  • 和下拉框一樣，日期的類型是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'}, ], }