博客

一、功能点

1、element-ui el-from表单规则动态验证：

:rules=“ruleForm.type == ‘phone’ ? rules1 : rules2”

2、时间间隔，发送验证码

3、密码验证

二、页面实现图

三、 vue代码

<section>
     <el-form
       :model="ruleForm"
       :rules="ruleForm.type == 'phone' ? rules1 : rules2"
       ref="ruleForm"
       label-width="0px"
       class="login-form"
       status-icon
     >
       <el-form-item prop="type">
         <el-radio-group v-model="ruleForm.type" @change="typeChange">
           <el-radio label="phone">手机</el-radio>
           <el-radio label="email">邮件</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item prop="userName">
         <el-input
           v-model="ruleForm.userName"
           size="small"
           auto-complete="off"
           placeholder="请输入用户名"
         >
           <i slot="prefix" class="icon-yonghuming" />
         </el-input>
       </el-form-item>
       <el-form-item v-if="ruleForm.type === 'phone'" prop="phone">
         <el-input v-model="ruleForm.phone" placeholder="请输入手机号">
           <i slot="prefix" class="el-icon-phone" />
         </el-input>

         <!-- <span class="status"></span> -->
       </el-form-item>
       <el-form-item v-if="ruleForm.type === 'email'" prop="email">
         <el-input v-model="ruleForm.email" placeholder="请输入邮箱">
           <i slot="prefix" class="el-icon-message" />
         </el-input>

         <!-- <span class="status"></span> -->
       </el-form-item>
       <el-form-item prop="code">
         <div class="dp-flex">
           <el-input v-model="ruleForm.code" placeholder="请输入验证码">
             <!-- <i slot="prefix" class="icon-yonghuming" /> -->
           </el-input>
           <el-button
             class="code-btn"
             v-if="statusMsg == '发送验证码' || statusMsg == '再次发送'"
             size="mini"
             @click="sendMsg"
             >{{ statusMsg }}</el-button
           >
           <el-button class="code-btn" v-else size="mini">{{
             statusMsg
           }}</el-button>
         </div>
       </el-form-item>
       <el-form-item prop="password">
         <el-input
           v-model="ruleForm.password"
           :type="passwordType"
           placeholder="请输入密码"
         >
           <i
             slot="suffix"
             class="el-icon-view el-input__icon"
             @click="showPwd"
           />
           <i slot="prefix" class="icon-mima"></i>
         </el-input>
       </el-form-item>
       <el-form-item prop="cpassword">
         <el-input
           v-model="ruleForm.cpassword"
           :type="cpasswordType"
           placeholder="请输入确认密码"
         >
           <i
             slot="suffix"
             class="el-icon-view el-input__icon"
             @click="showCpwd"
           />
           <i slot="prefix" class="icon-mima"></i>
         </el-input>
       </el-form-item>
       <el-form-item class="tx-al-center">
         <el-button
           class="login-submit"
           type="primary"
           @click="register"
         >
           注 册
         </el-button>
         <div class="error">{{ error }}</div>
       </el-form-item>
       <el-form-item>
         <!-- <span>《用户协议》</span> -->
         <!-- <a
     class="f1"
     href="http://www.meituan.com/about/terms"
     target="_blank">《用户协议》</a> -->
       </el-form-item>
     </el-form>
   </section>

四、JS代码（部分代码省略）

data() {
    const validatePass = (rule, value, callback) => {
      if (this.ruleForm.password !== "") {
        if (value !== this.ruleForm.cpassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (isValidateNoneMobile(value)[0]) {
        callback(new Error(isValidateNoneMobile(value)[1]));
      } else {
        callback();
      }
    };
    return {
      statusMsg: "发送验证码",
      error: "",
      appCode: "",
      ruleForm: {
        userName: "",
        code: "",
        phone: "",
        password: "",
        cpassword: "",
        email: "",
        type: 'phone',
      },
      rules1: {
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: false,
            type: "email",
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            type: "string",
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            pattern: "^(?!\\d+$)(?![a-zA-Z]+$)[A-Za-z\\d\\W]{8,32}$",
            message: "密码至少两种不同类型字符，且长度在8到32位",
            trigger: "blur",
          },
        ],
        cpassword: [{ validator: validatePass, trigger: "blur" }],
        
      },
      rules2: {
        phone: [
          {
            required: false,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            type: "string",
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: "^(?!\\d+$)(?![a-zA-Z]+$)[A-Za-z\\d\\W]{8,32}$",
            message: "密码至少两种不同类型字符，且长度在8到32位",
            trigger: "blur",
          },
        ],
        cpassword: [{ validator: validatePass, trigger: "blur" }],
      },
      passwordType: "password",
      cpasswordType: "password",
    };
  },
  methods: {
    typeChange(val) {
      let that = this;
      that.ruleForm.type = val;
    },
    getUrlKey(name) {
      //获取url 参数
      const url = window.location.href;
      // const url = "https://open.okaygis.com/okayx/register?appCode=okay-cloud-disk"
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            url
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },

    // 引用：

    showPwd() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    showCpwd() {
      this.cpasswordType == ""
        ? (this.cpasswordType = "password")
        : (this.cpasswordType = "");
    },
    sendMsg() {
      const that = this;
      let namePass;
      let emailPass;
      let phonePass;
      if (that.timerid) {
        return false;
      }
      //   this.$refs.ruleForm.validateField("name", (valid) => {
      //     namePass = valid;
      //   });
      that.statusMsg = "发送验证码";

      if (namePass) {
        return false;
      }
      that.$refs.ruleForm.validateField("email", (valid) => {
        emailPass = valid;
      });
      that.$refs.ruleForm.validateField("phone", (valid) => {
        phonePass = valid;
      });
      
     // 区分两种验证码发送方式
      if (that.ruleForm.type == "phone") {
        if (!phonePass) {
          let count = 60;
            that.statusMsg = `${count--}秒`;
            that.tiemid = setInterval(() => {
            that.statusMsg = `${count--}秒`;
            if (count === 0) {
                clearInterval(that.tiemid);
                that.statusMsg = `再次发送`;
            }
          }, 1000);
          userRegPhone(that.ruleForm.phone).then(({ status, data }) => {
            if (status == 200 && data && data.code == 0) {
            } else {
              that.statusMsg = data.msg;
            }
          });
        }
      } else if (that.ruleForm.type == "email") {
        if (!emailPass) {
          let count = 60;
            that.statusMsg = `${count--}秒`;
            that.tiemid = setInterval(() => {
            that.statusMsg = `${count--}秒`;
            if (count === 0) {
                clearInterval(that.tiemid);
                that.statusMsg = `再次发送`;
            }
          }, 1000);
          userRegEmail({
            email: that.ruleForm.email,
          }).then(({ status, data }) => {
            if (status == 200 && data && data.code == 0) {
            } else {
              that.statusMsg = data.msg;
            }
          });
        }
      }
    },
    // 点击注册事件
    register() {
      let that = this;
      that.$refs.ruleForm.validate((valid) => {
        if (valid) {
        	// 此处省略密码加密crypto-js的加密方式 encryption 
          const user = encryption({
            data: that.ruleForm,
            key: "配置决定",
            param: ["password"],
          });
          userRegister({
            userName: window.encodeURIComponent(that.ruleForm.userName),
            // password: CryptoJS.MD5(that.ruleForm.password).toString(),
            password: user.password,
            phone: that.ruleForm.phone,
            email: that.ruleForm.email,
            code: that.ruleForm.code,
            appCode: that.appCode,
            type: that.ruleForm.type,
          }).then(({ status, data }) => {
            if (status === 200) {
              if (data && data.code === 0) {
                that.$message.success("注册成功");
                setTimeout(() => {
                  location.href = "/login";
                }, 1000);
              } else {
                that.error = data.msg;
              }
            } else {
              that.error = `服务出错，错误码:${status}`;
            }
            setTimeout(() => {
              that.error = "";
            }, 1500);
          });
        }
      });
    },
  },