vue 修改密码,密码数字、字符、特殊符号 长度验证,二次验证

15 篇文章 0 订阅
  <el-form>
        <el-row>
          <el-col :span="21">
            <el-form-item label="旧密码:" required>
              <el-input
                v-model="editpwd.struserpwd_old"
                placeholder="请输入旧密码"
                size="medium"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="新密码:" required>
              <el-input
                v-model="editpwd.struserpwd_new"
                placeholder="请输入新密码"
                size="medium"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="确认密码:" required>
              <el-input
                v-model="editpwd.confirmpwd"
                placeholder="请再次输入新密码"
                size="medium"
                show-password
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleEditPwd" size="medium"
          >确 定</el-button
        >
      </span>
    handleEditPwd() {
      const { strusercode } = this.currentUser;
      const { struserpwd_old, struserpwd_new, confirmpwd } = this.editpwd;
      var passwordreg = /(?=.*\d)(?=.*[a-zA-Z]).{8,16}/; //  此处 是包含字母、数字 验证
      var isValid = passwordreg.test(struserpwd_new);
      if (!struserpwd_old || !struserpwd_new || !confirmpwd) {
        this.$message.error('必填项不能为空!');
        return;
      }
      if (!isValid) {
        this.$message.error('新密码必须包含字母、数字,且长度为8到16位!');
        return;
      }

      if (struserpwd_new !== confirmpwd) {
        this.$message.error('两次密码输入不一致,请重新输入!');
        return;
      }
      let params = {
        strusercode,
        ...this.editpwd
      };
      this.updataPwd({
        params,
        callback: res => {
          if (res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.dialogVisible = false;
          }
        }
      });
    }
var passwordreg =  /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/  ; //  字母、数字、特殊字符 验证
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我了解你的问题。对于Vue.js实现密码验证长度和包含字母、数字特殊符号的要求,可以使用以下代码进行实现: 在Vue实例中,我们可以定义一个名为`password`的变量,用于存储用户输入的密码。然后,在验证密码时,我们可以使用正则表达式来检查密码长度是否符合要求,并且是否包含字母、数字特殊符号。如果密码符合要求,我们可以将一个名为`isValid`的变量设置为`true`,否则将其设置为`false`。最后,我们可以在页面上根据`isValid`的值来提示用户密码是否符合要求。 以下是Vue.js代码示例: ``` <template> <div> <label for="password">密码:</label> <input type="password" v-model="password" @blur="validatePassword"> <span v-if="!isValid">密码必须包含字母、数字特殊符号,且长度不少于8位!</span> </div> </template> <script> export default { data() { return { password: '', isValid: true } }, methods: { validatePassword() { // 检查密码长度是否符合要求 if (this.password.length < 8) { this.isValid = false return } // 检查密码是否包含字母、数字特殊符号 let re = /(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{8,}/ if (!re.test(this.password)) { this.isValid = false return } // 密码符合要求 this.isValid = true } } } </script> ``` 在这个示例中,我们定义了一个验证密码的`validatePassword`方法,当用户输入密码后,我们可以通过@blur事件来触发该方法。在该方法中,我们使用正则表达式来检查密码是否符合要求,如果密码符合要求,我们将`isValid`设置为`true`,否则设置为`false`。最后,我们在页面上使用`v-if`指令来根据`isValid`的值来提示用户密码是否符合要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值