form 表单验证

重要的是 参与验证的属性都必须是响应式数据，否则验证会出错

注意两点：1.每次添加之后属性都要置空 可在watch里监听。2. 每次弹窗取消都要将验证置空（如果有验证不通过的系统有缓存）

//取消修改验证
this.$refs["upmodal_info"].resetFields();

<template>
  <div class="content">
      <Table border :columns="columns" :data="class_list">
        <template slot-scope="{ row }" slot="stateSlot">
          <span style="color: #19BE6B;" v-if="row.checkstate === 3">
            通过
          </span>
          <span style="color: #ED4014;" v-if="row.checkstate === 4">
            不通过
          </span>
        </template>
      </Table>
      <div class="page">
        <Page
          :total="class_list.total"
          :current="form.page"
          @on-change="change_page"
          show-total
        ></Page>
      </div>
    <Modal
      v-model="add_flag"
      :mask-closable="false"
      title="添加学生"
      class="modal1"
    >
      <div class="conter" v-if="add_flag">
        <Form
          :rules="formRule"
          ref="modal_info"
          :model="add_info"
          :label-width="90"
          label-position="right"
        >
          <FormItem label="姓名" prop="username">
            <Input v-model="add_info.username" placeholder="请输入姓名" />
          </FormItem>
       // 单选按钮
          <FormItem label="性别" prop="usersex">
            <RadioGroup v-model="add_info.usersex">
              <Radio :value="1" :label="1"> 男 </Radio>
              <Radio :value="2" :label="2"> 女 </Radio>
            </RadioGroup>
          </FormItem>
         //下拉选择
          <FormItem label="年级" prop="gradeid">
            <Select v-model="add_info.gradeid" placeholder="请选择年级">
              <Option
                v-for="u in grade_list"
                :key="u.gradeid"
                :value="u.gradeid"
              >
                {{ u.gradename }}
              </Option>
            </Select>
          </FormItem>
//数字输入框
 <FormItem label="班级排序" prop="classorder">
            <InputNumber :min="1" v-model="add_info.classorder"></InputNumber>
          </FormItem>
//多行文本
<FormItem label="班级公告" prop="placard">
            <Input
              v-model="add_info.placard"
              :maxlength="512"
              type="textarea"
              :rows="6"
              placeholder="请填写班级公告"
            />
          </FormItem>
          <FormItem label="民族" prop="nation">
            <Input v-model="add_info.nation" placeholder="请输入民族" />
          </FormItem>
          <FormItem label="身份证号" prop="cardid">
            <Input
              v-model="add_info.cardid"
              :maxlength="18"
              placeholder="请输入身份证号"
            />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="add_flag = false">取消</Button>
        <Button @click="add_class" type="primary" :loading="wait_flag"
          >保存</Button
        >
      </div>
    </Modal>
    </div>
</template>
<script>
export default {
  data() {
  return {
     columns: [
        {
          title: "序号",
          align: "center",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.form.page - 1) * this.form.pageSize + 1
            );
          },
        },
        {
          title: "姓名",
          key: "username",
          align: "center",
        },
        {
          title: "审核状态",
          slot: "stateSlot",
          align: "center",
          width: 100,
        },
        {
          title: "身份证号",
          key: "cardid",
          align: "center",
          width: 200,
        },
        {
          title: "创建时间",
          key: "createtime",
          align: "center",
          width: 200,
        },
        {
          title: "操作",
          key: "classname",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "#21A9FF" },
                  on: {
                    click: () => {
                      this.see_item = params.row;
                      this.see_flag = true;
                    },
                  },
                },
                "查看"
              ),
              h(
                "span",
                {
                  style: { margin: "0 10px", color: "#21A9FF" },
                },
                "|"
              ),
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "#21A9FF" },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "修改"
              ),
              h(
                "span",
                {
                  style: { margin: "0 10px", color: "#21A9FF" },
                },
                "|"
              ),
              h(
                "span",
                {
                  style: { cursor: "pointer", color: "rgb(255, 0, 30)" },
                  on: {
                    click: () => {
                      this.del(params.row);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      formRule: {
        username: [
          {
            transform: (value) => (value ? value.trim() : ""),
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        usersex: [
          {
            required: true,
            message: "请选择性别",
          },
        ],
        nation: [
          {
            transform: (value) => (value ? value.trim() : ""),
            required: true,
            message: "民族不能为空",
            trigger: "blur",
          },
        ],
        cardid: [
          {
            required: true,
            message: "身份证号不能为空",
            trigger: "blur",
          },
          {
            pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "身份证号格式不正确",
            trigger: "blur",
          },
        ],
loginpwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "密码长度为4~20个字符"
          }
        ],
 userphone: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur"
          }
        ],
        gradeid: [
          {
            required: true,
            message: "年级不能为空",
            type: "number",
            trigger: "change"
          }
        ],
        placard: [
          {
            required: true,
            message: "班级公告不能为空",
            trigger: "blur"
          }
        ],
        classorder: [
          {
            required: true,
            type: "number",
            message: "班级排序不能为空",
            trigger: "blur"
          }
        ],
      },
     }
   }
}

</script>