必填校验代码from表单

话不多说直接上代码

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校验规则

    
                  前置任务序号
                
              }
              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();
                  },
                }),
              ]}
            >
              
            

ant-d必填校验

{
                        if(/^1[3456789]\d{9}$/.test(value as string)){
                            return Promise.resolve()
                        }
                        return  Promise.reject("请输入正确手机号码")
                    }}]}
                >