React的form表单自定义校验规则

最新推荐文章于 2024-11-01 17:47:26 发布

原创

最新推荐文章于 2024-11-01 17:47:26 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #form表单自定义校验 #前端

使用antd开发的过程中，必定会遇到需要对form表单进行必填校验的处理，正常情况下，我们都会一个空的必填校验，如下：一般我们只需要简单配置rules即可

<FormItem label="管理员姓名" {...itemLayout.wholeLine}>
   {getFieldDecorator('adminName', {
     initialValue: '',
     rules: [
       { required: true, message: '请输入管理员姓名' },
     ],
   })(
     <AInput placeholder="请输入管理员姓名" maxLength={30} />
   )}
</FormItem>

遇到一些情况是：输入框有多个校验规则，比如说一个邮箱输入框

我们既需要：1、不为空；2、也需要邮箱格式正确；3、还需要与其他邮箱的后缀保持一致；

这个时候我们可能需要用到自定义的校验规则：validator配置自定义校验规则

<FormItem label="管理员邮箱" {...itemLayout.wholeLine}>
  {getFieldDecorator('adminEmail', {
    initialValue: '',
    rules: [
      {
        required: true,
        whitespace: true,
        validator: this