dsf5.0 element ui表单相关验证

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="126px" class="demo-ruleForm">
            <el-form-item label="登录密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="ruleForm.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="IDcard">
              <el-input v-model="ruleForm.IDcard"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否地方专家库专家" prop="isexpert">
              <el-select v-model="ruleForm.isexpert" placeholder="请选择">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择省份" v-show="ruleForm.isexpert == 1">
              <dsf-view-part path="/pc/nc/userinfo/sublist" style="height: 300px"></dsf-view-part>
            </el-form-item>
            <el-form-item label="工作单位" prop="unit">
              <el-input v-model="ruleForm.unit"></el-input>
            </el-form-item>
            <el-form-item label="工作单位统一社会信用代码" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
            <el-form-item label="单位所在地" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="phoneCode" class="codeInput-item">
              <el-input v-model="ruleForm.phoneCode" class="codeInput"></el-input>
              <img v-if="imgCode" :src="imgCode" alt="" class="img-code" @click="getImgCode()" />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="subBtn" type="primary" @click="onSubmit('ruleForm')">注册</el-button>
            </el-form-item>
          </el-form>

// 中名验证
var chnName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入中文名"));
  } else {
    const reg = /^[\u4e00-\u9fa5]+$/;
    if (value.length < 100 && reg.test(value)) {
      callback();
    } else {
      return callback(new Error("请输入正确的中文名"));
    }
  }
};
// 身份证
var checkIdNum = function (rule, value, callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if (!value) {
    return callback(new Error("证件号码不能为空"));
  } else if (!reg.test(value)) {
    return callback(new Error("证件号码不正确"));
  } else {
    callback();
  }
};
// 手机号
var validatorPhone = function (rule, value, callback) {
  if (value === "") {
    callback(new Error("手机号不能为空"));
  } else if (!/^1\d{10}$/.test(value)) {
    callback(new Error("手机号格式错误"));
  } else {
    callback();
  }
};



data() {
    // 密码
    const ToPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(.{8,20})$/.test(value)) {
        callback(new Error("密码设置8到20位,必须包含大写字母、小写字母、数字"));
      } else {
        callback();
      }
    };
    // 确认密码
    const equalToPassword = (rule, value, callback) => {
      console.log(666);
      if (this.ruleForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
}

rules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { required: true, validator: ToPassword, trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
        name: [
          { required: true, validator: chnName, message: "请输入姓名", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        IDcard: [{ required: true, validator: checkIdNum, message: "请输入身份证号", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        isexpert: [{ required: true, message: "请选择", trigger: "change" }],
        unit: [{ required: true, message: "请输入工作单位", trigger: "blur" }],
        code: [{ required: true, message: "请输入工作单位统一社会信用代码", trigger: "blur" }],
        address: [
          { required: true, message: "请输入单位所在地", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
        ],
        phone: [{ required: true, validator: validatorPhone, message: "请输入手机号", trigger: "blur" }],
        phoneCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位数字的验证码", trigger: "blur" },
        ],
        email: [{ type: "email", required: true, message: "请输入邮箱", trigger: "blur" }],
      },

20220314扩展

//  密码长度不少于8位，且数字、字母、特殊字符中的两者以上组合
    var pwdReg = /^(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,30}/;