フォームのカスタム検証ルール

開発プロセスでは、フォームの検証が広く使用されています。ユーザーの入力が必要である限り検証が行われると言えますが、そうでない場合は台無しになります(笑)。ただし、デフォルトの検証は幅広い適用性がありますが、一部の特殊な場合に使用されます。検証要件は非常に限られているため、カスタム検証ルールが必要です。

したがって、antD のフォームを使用してフォームを管理する場合は、特定のフィールドを検証するルールをカスタマイズする必要がありますが、このとき、定義したメソッドを指すようにルールに validator 属性を追加できます。(簡単な例として、私のカスタム検証ルールは重複した名前を入力するかどうかです)

 <Form.Item
      label="名称"
      labelCol={
   
   { span: 7 }}
      wrapperCol={
   
   { span: 14 }}
 >
            {getFieldDecorator("key", {
              rules: [
                { required: true, message: "请输入名称" },
                { validator: isRepeat } //校验名称是否重复
              ]
            })(<Input placeholder="请输入" maxLength="64" />)}
</Form.Item>

//这个是校验规则的函数  
//rule应该是当前检测form的名称等信息 具体在下面用图展示具体内容
//value表示当前form表单内容，callback则是校验的返回函数
const isRepeat = (rule, value, callback) => {
    if (arrs.length > 0 && arrs.filter(item => item.newKey == value).length > 0) {
      return callback("自定义配置项名称重复");
    } else {
      return callback();
    }
  };

コールバック () が必要であることに注意してください。コールバックが空の場合は、この条件で検証が合格したことを意味します。それ以外の場合、コールバック内の名前は、検証が失敗した後に表示される名前になります。

↓パラメータルールの情報です