el-form表单验证

        <el-form
          label-width="100px"
          class="form"
          label-position="left"
          :model="ruleform"
          :rules="rules"
          ref="tableForm"
        >
          <el-form-item label="旧密码" prop="oldPwd">
            <el-input
              v-model.trim="ruleform.oldPwd"
              show-password
              clearable
              name="oldPwd"
              placeholder="请输入旧密码"
              @blur="formChange"
              @keyup.native="
                ruleform.oldPwd = ruleform.oldPwd.replace(
                  /[^\a-\z\A-\Z0-9]/g,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input
              v-model="ruleform.newPwd"
              show-password
              clearable
              minlength="6"
              maxlength="20"
              name="newPwd"
              @blur="formChange"
              @keyup.native="
                ruleform.newPwd = ruleform.newPwd.replace(
                  /[^\a-\z\A-\Z0-9]/g,
                  ''
                )
              "
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmPwd">
            <el-input
              v-model="ruleform.confirmPwd"
              show-password
              clearable
              minlength="6"
              maxlength="20"
              name="confirmPwd"
              @blur="formChange"
              placeholder="请再次输入新密码"
              @keyup.native="
                ruleform.confirmPwd = ruleform.confirmPwd.replace(
                  /[^\a-\z\A-\Z0-9]/g,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号码"
            prop="phoneNumber"
            style="position: relative"
          >
            <el-input
              v-model="ruleform.phoneNumber"
              minlength="3"
              maxlength="20"
              name="phoneNumber"
              clearable
              placeholder="请输入手机号"
              :disabled="phoneBlooean"
              @blur="formChange"
              @keyup.native="
                ruleform.phoneNumber = ruleform.phoneNumber.replace(
                  /[^0-9]/g,
                  ''
                )
              "
            ></el-input>
            <!-- 判断是否已经验证手机号 -->
            <span class="phoneVerification" v-show="phoneBlooean">
              <i class="el-icon-warning-outline" v-if="!phoneVeifBlooean"></i>
              <span v-text="phoneVeifBlooean ? ' 已验证' : ' 未验证'"></span>
            </span>
            <el-tag
              v-show="phoneBlooean"
              class="phoneNewBin"
              @click="phoneNewBinFun"
              effect="plain"
              >重新绑定</el-tag
            >
          </el-form-item>
          <el-form-item label="验证码" prop="verificationCode">
            <el-input
              v-model.trim="ruleform.verificationCode"
              clearable
              minlength="6"
              maxlength="6"
              placeholder="请输入验证码"
              name="verificationCode"
              @blur="formChange"
              @keyup.native="
                ruleform.verificationCode = ruleform.verificationCode.replace(
                  /[^\d]/g,
                  ''
                )
              "
              style="width: 150px; position: relative"
            ></el-input>
            <el-button
              type="primary"
              class="CodeButton"
              @click="myVerificationCode"
              :disabled="CodeBlooean"
              >{{ codeText }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 80px" @click="onSaveData"
              >确定</el-button
            >
            <el-button
              style="width: 80px; margin-left: 20px"
              @click="onclearData"
              >取消</el-button
            >
          </el-form-item>
        </el-form>

      rules: {
        oldPwd: [
          {
            required: true,
            message: "请输入旧密码,6-20位数",
            trigger: "blur",
            min: 6,
            max: 20,
          },
        ],
        newPwd: [
          {
            required: true,
            message: "请输入新密码，6-20位数",
            trigger: "blur",
            min: 6,
            max: 20,
          },
        ],
        confirmPwd: [
          {
            required: true,
            message: "请再次输入正确的新密码",
            trigger: "blur",
            validator: validateNewPwd,
          },
        ],
        phoneNumber: [
          {
            required: true,
            message: "请输入正确的手机号码",
            trigger: "blur",
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          },
        ],
        verificationCode: [
          {
            required: true,
            message: "请输入正确的验证码",
            trigger: "blur",
            min: 6,
            max: 6,
          },
        ],
      },

        confirmPwd: [
          {
            required: true,
            message: "请再次输入正确的新密码",
            trigger: "blur",
            validator: validateNewPwd,
          },
        ],

    const validateNewPwd = (rules, value, callback) => {
      if (this.ruleform.newPwd !== value) {
        callback(new Error("再次输入密码不一致!"));
      }
    };