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吧~~