vue+element的el-form使用

<el-form ref="registerForm" :model="registerForm" :rules="rules" label-position="right" label-width="170px">
	<li class="item-password-li">
            <div class="input-item item-password">
              <el-form-item :label="$t('registerForm.password')" prop="password" :show-message="true">
                <el-input type="password" v-model="registerForm.password" :placeholder="$t('registerPlaceHolder.password')" />
              </el-form-item>
            </div>
            <div class="strength">
              <span :class="{ weak: isWeak }"></span>
              <span :class="{ middle: isMiddle }"></span>
              <span :class="{ strong: isStrong }"></span>
            </div>
            <div class="strength-title">
              <span>{{ $t("registerForm.weak") }}</span>
              <span>{{ $t("registerForm.middle") }}</span>
              <span>{{ $t("registerForm.strong") }}</span>
            </div>
          </li>
</el-form>

import { checkStrong } from "@/untils/checkPwdStrong";
data(){
const validatePassword = (rule, value, callback) => {
            if (value === "") {
              callback(new Error('密码不能为空'));
            } else if(this.isStrong == false){
              callback(new Error('密码不符合规范'));
            }else {
              callback();
            }
          };
	return{
	rules: {
        // 表单规则
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{1,20}$/,
            message: this.$t("registerPlaceHolder.userRule"),
          },
        ],
        phone: [
          { required: true, trigger: "blur", validator: validatePhone },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: this.$t("registerPlaceHolder.phoneRule"),
          },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword },
          {
            pattern: "",
            message: this.$t("registerPlaceHolder.passwordRule"),
          },
        ],
        repassword: [
          { required: true, trigger: "blur", validator: validateRePassword },
        ],
        messageCaptcha: [
          { required: true, trigger: "blur", validator: validateVerticalcode },
        ],
        useremail: [
          {
            required: true,
            trigger: "blur",
            type: "email",
            message: this.$t("registerPlaceHolder.emailRule"),
          },
        ],
      },
      isWeak: false,
      isMiddle: false,
      isStrong: false,
            
	}
},
computed: {
    password () {
      return this.registerForm.password;
    },
  },
watch: {
         pwd(newValue, oldValue) {
           this.msgText = checkStrong(newValue);
           console.log( this.msgText)
           if (this.msgText > 1 || this.msgText === 1) {
             this.isWeak = true;
           } else {
             this.isWeak = false;
           }
           if (this.msgText > 2 || this.msgText === 2) {
             this.isMiddle = true;
           } else {
             this.isMiddle = false;
           }
           if (this.msgText === 5) {
             this.isStrong = true;
           } else {
             this.isStrong = false;
           }
         }
     },
     methods:{
     // 获取验证码
		    async getCode () {
		      const res = await sendMessage(this.registerForm.phone);
		      if (res.success) {
		        this.isCodeCorrect = true;
		        this.$message.success(this.$t("registerPlaceHolder.codesuccess"));
		      } else {
		        this.isCodeCorrect = false;
		        this.$message.error(this.$t("registerPlaceHolder.codefail"));
		      }
		    },
	    // 发送验证码
	    sendCode () {
	      var re = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
	      if (re.test(this.registerForm.phone)) {
	        const TIME_COUNT = 60;
	        if (!this.timer) {
	          this.count = TIME_COUNT;
	          this.show = false;
	          this.timer = setInterval(() => {
	            if (this.count > 0 && this.count <= TIME_COUNT) {
	              if (this.count === 60) {
	                this.getCode();
	              }
	              this.count--;
	            } else {
	              this.show = true;
	              clearInterval(this.timer);
	              this.timer = null;
	              return false;
	            }
	          }, 1000);
	        }
	      } else {
	        this.show = true;
	        this.$message.error(this.$t("registerPlaceHolder.phone"));
	      }
	    },
	    // 表单提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.checked) {
            this.$message.error(this.$t("registerPlaceHolder.checked"));
          } else {
            var form = JSON.stringify(deepClone(this.registerForm));
            // form.password = igodatetime.jiami(form.password);
            // form.repassword = igodatetime.jiami(form.repassword);
            this.resigter.info = igodatetime.jiami(form);
            registerUser(this.resigter).then((res) => {
              if (res.success) {
                this.goTo('/login');
              }
            });
          }
        } else {
          return false;
        }
      });
    },
     }

checkStrong.js

export function checkStrong(sValue) {
    var modes = 0;
    //正则表达式验证符合要求的
    if (sValue.length < 1) return modes;
    if (/\d/.test(sValue)) modes++; //数字
    if (/[A-Za-z]+/.test(sValue)) modes++; //小写或者大写
    //if (/[A-Z]/.test(sValue)) modes++; //大写  
    if(/[$@$!%*#?&]/.test(sValue)) modes++; //特殊字符
    if (res.test(sValue)) modes++;

    //逻辑处理
    switch (modes) {
        case 1:
            return 1;
            break;
        case 2:
            return 2;
            break;
        case 3:
            return 3;
            break;
        case 4:
        case 5:
            return sValue.length < 9 ? 4 : 5
            break;
    }
    return modes;
}

另一种表单验证

async handleConfirm() {
        const validateResult = await this.$refs.addressBookForm
          .validate()
          .catch(() => false);
        if (!validateResult) return;
        this.$emit(
          "func",
          this.addressBookForm,
          this.regionname,
          this.indexActive
        );
      },