vue必填校验

话不多说直接上代码

 <el-dialog v-model="open" append-to-body draggable title="新增项目" width="1200px">
      <el-form ref="projectRef" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入编码"/>
            </el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目经理" prop="managerId">
              <el-select
                  v-model="form.managerId"
                  placeholder="请选择项目经理"
                  value-key="userId"
                  @change="onChangeManager"
              >
                <el-option
                    v-for="dict in userList"
                    :key="dict.userId"
                    :label="dict.userName"
                    :value="dict.userId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划日期" prop="date">
              <el-date-picker
                  v-model="form.date"
                  end-placeholder="结束日期"
                  range-separator="-"
                  start-placeholder="开始日期"
                  type="daterange"
                  unlink-panels
                  value-format="YYYY-MM-DD"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目阶段" prop="projStage">
              <el-select v-model="form.projStage" placeholder="请选择项目阶段">
                <el-option
                    v-for="dict in sys_proj_stage"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属部门" prop="deptId">
              <el-tree-select
                  v-model="form.deptId"
                  :data="options"
                  :node-key="defaultProps.nodeKey"
                  :props="defaultProps.props"
                  check-strictly
                  default-expand-all
                  filterable
                  style="width: 100%"
                  @node-click="selectDept"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择项目状态">
                <el-option
                    v-for="dict in sys_proj_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目描述" prop="desc">
              <el-input
                  v-model="form.desc"
                  :rows="4"
                  placeholder="请输入项目名称"
                  resize="none"
                  type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

js代码实现原理

const data = reactive({
  defaultProps: {
    nodeKey: "key",
    props: {value: "id", label: "label", children: "children"},
  },
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  options: [],
  userList: [],
  rules: {
    name: [{required: true, message: "项目名称不能为空", trigger: "blur"}],
    deptId: [{required: true, message: "部门不能为空", trigger: "blur"}],
    date:[{required: true, message: "计划日期不能为空", trigger: "blur"}],
    code: [{required: true, message: "编码不能为空", trigger: "blur"}],
    managerId:[{required: true, message: "项目经理不能为空", trigger: "blur"}],
  },
});

以上是弹窗框必填校验

现在我们需要规定rules里边的required参数，因为我们需要在里边规定必填校验的规则

  addFormRules: {
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            // 通过validator 进行自定义校验规则
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ]
      }

接着我们会在data规定必填校验数据

 data () {
    const checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        return cb()
      }
      cb(new Error('请输入正确的邮箱'))
    }
    const checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入正确的手机号'))
    }
  }

以上的代码checkEmail 必填校验则是上面的函数代码

react校验规则

    <Form.Item
              label={
                <span
                  style={{
                    width: '100px',
                    whiteSpace: 'normal',
                    lineHeight: '17px',
                  }}
                >
                  前置任务序号
                </span>
              }
              name="predTmplListSid"
              rules={[
                { type: 'number', message: '请输入数字' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (value !== null) {
                      if (value <= 0 || value > rightData.length ) {
                        return Promise.reject('请选择正确的序号');
                      }
                      if (value === parseInt(formData?.sid)) {
                        return Promise.reject('前置任务序号不能等于自身');
                      }
                    }
                    return Promise.resolve();
                  },
                }),
              ]}
            >
              <InputNumber min={0} />
            </Form.Item>