element-ui实现密码复杂度验证
利用element-ui组件中的表单时 里面el-form中的rules属性,rules属性定义的是存放多个验证规则的数组formRules
在el-input标签内,设置一个v-model双向数据绑定,以及其他的属性等。:model是绑定属性,置空
demo
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
data
//插入验证规则
loginRules: {
username: [。。此处略去。。],
password: [
//在rule内可以插入多组数组来验证用户名、密码等,数组内可以插入多个对象,同时起作用
{
required: true,
trigger: "blur",
message: "密码不能为空",
},
{
//插入正则验证:大小写、数字、至少8位、不常用字符
pattern:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-])[A-Za-z\d$@#!%^*?&+-]{8,}/,
message: "密码应当至少8位且含有数字、大小写字母及特殊字符",
},
//rule中插入比较复杂的验证方法
{ validator: checkPassword, trigger: "blur" },
],
},