在开始之前需要把element-ui在vue中引入好，如果没有引入好的话，需要先跟着element-ui的文档进行操作，接下来就可以进行学习了。

第一种：在el-form-item单个添加验证

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

做法：需要在el-form-item标签中加入 :rules=''直接是验证的条件 ''

下面举个例子(验证用户名 不能为空)

案例样图

第二种：在表单上加多个验证

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

做法：需要在el-form-item标签中加入 :rules=''rules '' ，然后在data()中写入rule{添加每个表单的验证}

下面举个例子(验证用户名和密码 不能为空)

data中

rule: {

userName: loginName: [

{ required: true, message: "用户名不能为空", trigger: "blur" }

],

userPass: [

{ required: true, message: "密码不能为空", trigger: "blur" }

]

}

案例样图

我这两个都只简单了做了不为空的验证，还可以加其他的验证噢(如下)

最基础的验证

{ required: true, message: '请输入姓名', trigger: 'blur' },//不能为空

{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度

{ required: true,

pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,

message: '姓名不支持特殊字符',

trigger: 'blur' }//正则

在data中定义一些自定义的验证

data() {

let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/

var newPass= (rule, value, callback) => {

if (!reg.test(value)) {

callback(new Error('密码应是6-12位数字、字母或字符！'))

} else if (this.form.oldPasswd === value) {

callback(new Error('新密码与旧密码不可一致！'))

} else {

callback()

}

}

}

return {

form: {

newPasswd: ''

},

rules: {

newPasswd: [

{ required: true, message: '请输入新密码', trigger: 'blur' },

{ validator: newPass, trigger: 'blur' }

]

}

}

}

/**

参数 item

required true 必填项

maxLength 字符串的最大长度

min 和 max 必须同时给 min < max type=number

type 手机号 mobile

邮箱 email

网址 url

各种自定义类型 定义在 src/utils/validate 中 持续添加中.......

*/

有帮助的话 ，别忘了下面的心心点你一下(想知道更多关于知识请私信我哦)

如有不懂或解决不了的问题可以私信我，或者在下方评论 ，小陈帮你解决困难