表单自定义验证(修改密码)

修改密码

  • 所有密码规则校验(比如:6-20位,且必须包含字母和数字!)
  • 新密码不能与原密码相同
  • 确认密码必须与新密码一致

vue 部分

// template
<el-form ref="formData" :model="formData" :rules="formRules" label-width="100px">
    <el-form-item label="原密码" prop="password">            <el-input v-model="formData.password" placeholder="请输入原密码" type="password" />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="formData.newPassword" placeholder="新密码和原密码不能相同" type="password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
           <el-input v-model="formData.confirmPassword" placeholder="确认密码和新密码保持一致" type="password" />
     </el-form-item>
</el-form>

// script
data () {
    return {
      formData: {
        password: "",
        newPassword: "",
        confirmPassword: ""
      },
      formRules: {
        password: [{
          validator: (rule, value, callback) => {
            this.$verify.password(value, callback, this.formData, this.$refs.formData);
          },
          trigger: "blur"
        }],
        newPassword: [{
          validator: (rule, value, callback) => {
            this.$verify.newPassword(value, callback, this.formData, this.$refs.formData);
          },
          trigger: "blur"
        }],
        confirmPassword: [{
          validator: (rule, value, callback) => {
            this.$verify.confirmPassword(value, callback, this.formData, this.$refs.formData);
          },
          trigger: "blur"
        }]
      }
    };
}

自定义js部分

// /common/scripts/customValiate.js

/*
 * @Descripttion: 自定义表单验证方法
 * @param { $formData } <el-form :model="formData"></el-form>
 * @return { $formEl } <el-form ref="formEl"></el-form>
 * @Author: yeming
 * @Date: 2018-06-05 15:51:42
 */

import Vue from 'vue';

const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/;
const errorText = "6-20位,且必须包含字母和数字!";
const customValiate = {
  install (Vue) {
    Vue.prototype.$verify = {
      password: (value, callback, $formData, $formEl) => {
        if (value) {
          value = value.trim();
          if (!regex.test(value)) {
            return callback(new Error(errorText));
          } else {
            return callback();
          }
        } else { // 不能为空
          return callback(new Error(errorText));
        }
      },
      newPassword: (value, callback, $formData, $formEl) => {
        if (value) {
          value = value.trim();
          if (!regex.test(value)) {
            return callback(new Error(errorText));
          } else if ($formData.password === $formData.newPassword) {
            return callback(new Error("新密码与原密码相同!"));
          } else {
            return callback();
          }
        } else {
          return callback(new Error(errorText));
        }
      },
      confirmPassword: (value, callback, $formData, $formEl) => {
        if (value) {
          value = value.trim();
          if (!regex.test(value)) {
            return callback(new Error(errorText));
          } else if ($formData.confirmPassword !== $formData.newPassword) {
            return callback(new Error("两次输入密码不一致!"));
          } else {
            return callback();
          }
        } else {
          return callback(new Error(errorText));
        }
      }
    };
  }
};
Vue.use(customValiate);

main.js 引入

import "@/common/scripts/customValiate";
千千学习、练习用
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。