element-ui 中表单验证的三种场景

https://www.jianshu.com/p/a2164e370e29
正则参考
https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html
思否 博客
https://segmentfault.com/a/1190000020410128

1）第一种常用方式：表单上加rules｛object｝

比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
    var validateNewPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }
    var validateComfirmPwd = (rule, value, callback) => {
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.newPasswd !== value) {
            callback(new Error('确认密码与新密码不一致！'))
        } else {
            callback()
        }
    }
    return {
        form: {
            newPasswd: '',
            comfirmPwd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: validateNewPwd, trigger: 'blur' }
            ],
            comfirmPwd: [
                { required: true, message: '请输入确认密码', trigger: 'blur' },
                { validator: validateComfirmPwd, trigger: 'blur' }
            ]
        }
    }
}

2）第二种方式：在el-form-item单个添加

pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/

表达式 注意这里的正则表单要用 “\\” 代表一个 "\ "

如下面校验 https url规则时

pattern: /^((https)?:\\/\\/)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/

3）第三种方式：动态增减表单项

对应的数据结构：

image.png

对应的数据结构：

image.png

addPhone() {
    let len = this.formData.phoneInfoList.length
    this.$set(this.formData.phoneInfoList, len, {
        relation: [],
        phoneNum: '',
        relationType: 0,
        schoolId: this.selectedUser.schoolId,
        userCode: this.selectedUser.userCode
    })
},
deletePhone(item) {
    if (this.formData.phoneInfoList.length > 1) {
        // 表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
        this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item), 1);
    } else {
        this.$vux.toast.text('至少保留一个家长亲情号码！')
        return false
    }
},

这个场景下的rule、prop直接写是对应不上对应不上表单mode绑定的对象上的属性的，所以在此要用循环的方式找到要校验的字段所在数据中的索引，然后再以字符串拼接的方式连上校验字段名称：

image.png

渲染出来的html为：

image.png