vue + elementUi 实现校验两次输入密码是否一致

最新推荐文章于 2023-07-24 10:12:04 发布

Gordennizaicunzai

最新推荐文章于 2023-07-24 10:12:04 发布

阅读量9.6k

点赞数 10

分类专栏： VUE

原文链接：https://blog.csdn.net/xfWgaoqiang/article/details/108845967

版权

VUE 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<el-form-item v-else label="密码" label-width='150px' prop="password">
   <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input>
</el-form-item>
<el-form-item  v-else label="确认密码" label-width='150px' prop="repassword">
   <el-input :placeholder="info.repassword" v-model="info.repassword" style="width: 500px"></el-input>
</el-form-item>

data中声明变量     
var validatePass2 = (rule, value, callback) => {
	  if (value === '') {
         callback(new Error('请再次输入密码'))
         // password 是表单上绑定的字段
      } else if (value !== this.info.password) {
         callback(new Error('两次输入密码不一致!'))
      } else {
       	 callback()
      }
    }
校验规则中  
repassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]

<el-form-item v-else label="密码" label-width='150px' prop="password">
   <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input>
</el-form-item>
<el-form-item  v-else label="确认密码" label-width='150px' prop="repassword">
   <el-input :placeholder="info.repassword" v-model="info.repassword" style="width: 500px"></el-input>
</el-form-item>
data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.info.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      info: {
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/, message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位，密码不能包含 用户名，公司名称(lidian), 公司域名(rekoon) （判断的时候不区分大小写)' }
        ],
        repassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },