1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > antd form validator自定义校验规则

antd form validator自定义校验规则

时间:2021-12-08 15:24:19

相关推荐

antd form validator自定义校验规则

需求:如果输入为空:提示不可为空,如果输入字段里有x字符串,提示不可带x,根据不同的情况提示不同的错误信息。

效果图如下:

代码如下:

import React, {Component} from 'react';import {Button, Modal, Form, Input} from 'antd';import styles from './index.less';const FormItem = Form.Item;const validateLimit = (rule, value, callback) => {console.log(rule);console.log(value);if (!value) {callback('图谱名称不可为空');}if (value.indexOf('x') !== -1) {callback('图谱名称不可出现 x 字样');} else {callback();}};class MapConstruction extends Component {constructor(props) {super(props);}render() {const {getFieldDecorator} = this.props.form;return (<div className={styles.container}><Form><FormItemlabel="图谱名称"labelCol={{span: 5}}wrapperCol={{span: 18}}>{getFieldDecorator('note', {rules: [{required: true,whitespace: true,message: ' '}, {validator: validateLimit}],})(<Input placeholder='请输入'/>)}</FormItem></Form></div>);}}export default Form.create()(MapConstruction);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。