element-ui中表單驗證的三種方式

1.element-ui的引入

第一種常用方式：表單上加rules｛object｝

 

• 在項目中，通常我們在提交表單的時候需要進行一個必填項的驗證，在這里，就簡單的介紹一下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
          }
          })
      }