vue+element 表單驗證 自定義驗證 正則驗證 多表單驗證

這是我參與更文挑戰的第2天，活動詳情查看： 更文挑戰

項目中常常會出現的表單驗證環節，通常是一個表單，提交時驗證一波就能夠了，不免遇到業務繁雜的時候，一個表單不能知足需求了，就須要設置多個表單，驗證方式也須要稍做調整了

經常使用的表單驗證方法

表單驗證

validate()

// 以此表單爲例
// 在表單設置ref,rules
<template>
    <el-form
        ref="createForm"
        :model="createTask"
        :rules="rules"
        label-width="120px"
    >
        // 這裏設置prop，model
        <el-form-item
          label="名稱"
          prop="task_name"
        >
          <el-input
            v-model="createTask.task_name"
            placeholder="請輸入名稱"
          ></el-input>
        </el-form-item>
        ...
    </el-form>
</template>

<script>
// 其餘項省略嘍
data() {
    return {
        createTask：{
            task_name: '',
            ...
        },
        rules: {
            task_name: [
              { required: true, message: '請輸入名稱', trigger: 'blur' },
              { min: 5, max: 22, message: '長度在 5 到 22 個字符', trigger: 'blur' }
              //其餘驗證設置...
            ],
            ...
        }
    }
},
methods: {
    // 在須要的地方驗證createForm表單 
    xxxFn(){
        // valid
        this.$refs.createForm.validate((valid) => {
            if (valid) {
                // submit Fn
            } else {
                // error
            }
        })
    },
    // 或者這樣
    async xxxFn() {
      try {
        // valid
        await this.$refs.createForm.validate()
        // submit API
        await submit({params}) 
        // success 
      } catch (error) {
        // error
      }
    }
}
</script>
複製代碼

驗證某個字段

validateField()

根據上面的示例改個方法便可

this.$refs.createForm.validateField('task_name')
複製代碼

驗證多個字段，傳入數組

this.$refs.createForm.validateField(['task_name','xxx',...])
複製代碼

清除表單驗證

clearValidate()

this.$refs.createForm.clearValidate()
複製代碼

須要和resetFields()區分一下，clearValidate() 是去掉了驗證效果，僞裝沒有驗證過，resetFields() 是對整個表單進行重置，將全部字段值重置爲初始值，並去掉驗證效果，回到表單最初始的狀態

清除某個字段驗證

clear方法不變，直接傳參

this.$refs.createForm.clearValidate('task_name')
複製代碼

一樣，清除多個字段字段驗證，傳入數組便可

this.$refs.createForm.clearValidate(['task_name','xxx',...])
複製代碼

自定義方法驗證

自定義條件

data() {
    //在這裏定義條件判斷
    let checkName = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('不能爲空'))
        } else if (value !== 'default') {
            callback(new Error('默認值'))
        } else {
            callback()
        }
    }
    return {
        rules: {
            // 在這裏設置 validator
            task_name: [
                { required: true, validator: checkName , trigger: 'blur' }
                // 這裏也能夠加其餘驗證
            ]
        }
    }
}
複製代碼

調用後端API驗證

data() {
    let checkName = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('不能爲空'))
        } else if (value !== 'default') {
            callback(new Error('默認值'))
        } else {
            let result = this.checkTaskNameFn(value)
            result
                .then((data) => {
                    if (data) {
                      callback()
                    } else {
                      callback(new Error('驗證不知足..'))
                    }
                })
                .catch((res) => {
                    callback(new Error('error 不知足')))
                })
        }
    }
    // rules同上
}

methods: {
    checkTaskNameFn(value) {
        return new Promise(async (resolve, reject) => {
            try {
                await checkAPI({params})
                resolve(true)
            } catch (error) {
                reject(false)
            }
        })
    }
}
複製代碼

正則驗證

設置rules

rules: {
    task_name: [
      { required: true, message: '請輸入名稱', trigger: 'blur' },
      {
        pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,20}$/,
        message: '格式不正確'
      }
    ]
}
複製代碼

自定義組合驗證

當遇到正則和其餘條件一塊兒驗證等繁瑣需求，rules設置也不能徹底知足需求，也可使用自定義條件

此處分享一則我遇到的 並不常見的 亂七八糟的 正則驗證需求，體驗一下：

8-16位字符，須要同時包括數字、大小寫字母和特殊字符，其中特殊字符最多不能超過3個，且須要在「~ @ # $ % * _ - + = : , . ? [ ] { }」範圍內

data() {
    let checkName = (rule, value, callback) => {
        let sRegex = '^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[~@#$%*+=:,?._\-{}\[\]])[\da-zA-Z~@#$%*+=:,?._\-{}\[\]]{8,16}$'
        let num = value.replace(/[^~@#$%*+=:,?._\-{}\[\]]/g, '').length
        let reg = new RegExp(sRegex)
        if (!value) {
            callback(new Error('不能爲空'))
        } else if (!reg.test(value)) {
            callback(new Error('不知足'))
        } else if (num > 3) {
            callback(new Error('特殊字符不能超過3個'))
        } else { // 其餘條件
            // 或組合API驗證...
            callback()
        }
    }
}
複製代碼

多表單驗證

示例兩個表單

<el-form
        ref="formA"
        :model="modelA"
        :rules="rulesA"
    ></el-form>

    <el-form
        ref="formB"
        :model="modelB"
        :rules="rulesB"
    ></el-form>
複製代碼

驗證條件隨意，驗證方法以下：

// 先定義個方法
methods：{
    async validateAllform() {
        // 這樣
        let formA
        this.$refs.formA.validate((valid) => {
            if (valid) {
              formA = valid
              ...
            }else{
              ...
            }
        })
        
        // 這樣
        let formB = this.$refs.formB.validate()
        
        // 或這樣 （form中可能有API驗證）
        let formA = await this.$refs.formA.validate()
        let formB = await this.$refs.formB.validate()
        
        // 根據需求整點兒邏輯判斷
        if (formA && formB) {
            return true
        } else {
            return false
        }
    },
    
    // 在須要的地方調用便可
    async handleNext() {
        try {
            // valid
            let isValid = await this.validateAllform()
            // true && submit 
        } catch (error) {
            // error
        }
    }
}
複製代碼

以上就是被各類需求捶打的我在項目中親測並使用的一些驗證姿式，根據各自項目的具體需求一塊兒CV吧~~