// 严格限制输入中英文字数import { Form, Input } from 'antd';import React from 'react';const { TextArea } = Input;interface propTypes { label?: string; name: string; rules?: any; maxLength?: number; wrapperCol?: any; isTextarea?: boolean; // 是否是文本域,默认false是输入框,文本域传true placeholder?: string; disabled?: boolean; style?: any; extra?: string;}let rows = {}const computedLen = (value: string) => { value = value || "" let len = 0; for (let i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) { len += 2; } else { len++; } } return len}const InputWrapper = (props: any) => { const { isTextarea, value, maxLength, placeholder, onChange, disabled, style } = props let Ele: any = Input if (isTextarea) { Ele = TextArea rows = { rows: 4 } } return <Ele {...rows} style={style || {}} disabled={disabled || false} value={value} allowClear placeholder={placeholder || '请输入'} onChange={(e: any) => { let value = e.target.value // let len = computedLen(value) // if (len <= maxLength * 2) { onChange(value) // } }}></Ele>}const InputLimitNumber: React.FC<propTypes> = (props) => { const { label, name, rules = [], maxLength = 1000000000000000, wrapperCol, extra } = props; let wrapperColReal = {} let extraObj = {} if (wrapperCol) { wrapperColReal = { wrapperCol } } if (extra) { extraObj = { extra } } // 门店数据 return ( <Form.Item {...wrapperColReal} {...extraObj} label={label} name={name} rules={[ ...rules, { validator: (rule, value) => { // console.log(value, rule); // value就是我们输入的值。 let len = computedLen(value) if (len > maxLength * 2) { return Promise.reject(rule.message); } else return Promise.resolve(); }, // 自定义的验证方法 message: `限${maxLength}个汉字(英文${maxLength * 2}个)`, } ]} > <InputWrapper {...props} /> </Form.Item> );};export default InputLimitNumber;