在项目开发中，修改密码以及重置密码的业务场景太常见了，但是对于密码的复杂度有一定的要求。前端对于此类要求最简便的方式就是正则校验。下面看一个例子。

<template>
  <div class="app-container">
    <el-card>
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    var testPassword = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*$/
    var password = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        return callback(new Error('与新密码不一致'))
      }else{
        callback()
        }
    }
    var newPassword = (rule, value, callback) => {
      if (testPassword.test(this.form.newPassword) === false) {
        return callback(new Error('密码强度不够'))
      }else{
        callback()
        }
    }
    return {
      form: {},
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: newPassword, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入确定密码', trigger: 'blur' },
          { validator: password, trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    reset() {
      this.$refs.ruleForm.resetFields()
    },
    submit() {
      console.log(this.form)
    }
  }
}
</script>

这是我项目中的静态页面代码，功能已经全部实现。如有需要可以自取。

下面讲一下核心代码以及业务逻辑。我们在表单中通过表单验证，自定义的一个方法，通过定义一个正则表达式，对于用户输入的新密码进行正则校验，不通过则抛出错误。

    var testPassword = /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*$/

这段代码是密码是校验目标内容是否包含大写字母、小写字母、数字、特殊符号。必须四种都有才会校验通过。

要是业务需要三种就行可以改下这块内容，大家根据自己的需求来就行。

看到这里就点个赞吧！