vue+element-Ui實現簡單的表單必填項驗證（1）

• 在項目中，通常我們在提交表單的時候需要進行一個必填項的驗證，在這里，就簡單的介紹一下element提供的表單組件中的必填項驗證
• 通過閱讀文檔，可以得知el-form上是自帶一個validate方法的

對整個表單進行校驗的方法，參數為一個回調函數。該回調函數會在校驗結束后被調用，並傳入兩個參數：是否校驗成功和未通過校驗的字段。若不傳入回調函數，則會返回一個 promise

一、首先，我們要調用el-form上的方法，需要綁定一個ref，通過ref鏈的方式來進行調用

二、通過自帶的屬性rules來綁定一個驗證規則

• 驗證規則：

  • 是否必須填： required:true|| fasle

  • 根據正則表達式驗證： pattern

  • 最大長度和最小長度： min和max

  • 數據轉換：transform（value）{return}

  • 自定義校驗功能：validador:fn(rule, value, callback)

  • 自帶驗證類型： type

    • string：必須是類型string。
    • number：必須是類型number。
    • boolean：必須是類型boolean。
    • method：必須是類型function。
    • regexp：必須是RegExp創建新項時不生成異常的實例 或* 字符串RegExp。
    • integer：必須是類型number和整數。
    • float：必須是類型number和浮點數。
    • array：必須是由…確定的數組Array.isArray。
    • object：必須是類型object而不是Array.isArray。
    • enum：價值必須存在於enum。
    • date：值必須有效，由確定 Date
    • url：必須是類型url。
    • hex：必須是類型hex。
    • email：必須是類型email。

    Rules: {
      goodsName: [
    		// 還可以通過pattern來加入正則    
        { type: 'date'，required: true, message: '商品名不能為空', trigg: 'blur' },
        // 也可以放入兩條驗證規則
        { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
      ]
    }
    

三、model為表單控件綁定的數據對象

四、el-form-item中prop是與rules驗證規則對應的名稱，驗證的就是v-model存在不存在

五、這樣在點擊最后的提交按鈕的時候，只需觸發一個我們的validate就可以了

<el-form ref="basicInfo" :model="Form" :rules="Rules" label-width="120px" class="basicInfo">
  <el-form-item
    label="商品名稱："
    prop="goodsName"
  >
    <el-col class="goodsAddSecond-InputWidth">
      <el-input v-model="Form.goodsName"></el-input>
    </el-col>
  </el-form-item>
</el-form>
<el-button @click="submit('basicInfo')"></el-button>

submit(formName) {
  this.$refs[formName].validate(valid => {
    if(valid){
      alert("驗證成功")
    }else{
      alert("驗證失敗")
      return false
    }
	})
}

這是我們一個簡單的利用element-Ui提供的方法實現一個表單必填項驗證就完成了。

如果有出入的地方，歡迎指出，立馬改正，有想一起學習前端的小伙伴，歡迎加QQ1356770685