vu恶的隐显列 和表单验证（包含正则的校验）

对应上就可以字段了

点击还可以跳转页面

表单验证：blur：input输入框 change下拉选择框 pattern正则校验

    const data = reactive({
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phone: undefined,
      },
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        gender: [
          { required: true, message: "用户性别不能为空", trigger: "change" },
        ],
        deptName: [
          { required: true, message: "用户所属部门不能为空", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "用户所属部门ID不能为空", trigger: "blur" },
        ],
        holderId: [
          { required: true, message: "用户身份证号不能为空", trigger: "blur" },
        ],
        email: [
          {
            type: "email",
            required: true,
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
            required: true,
          },
        ],
      },
    });

    const { queryParams, form, rules } = toRefs(data);