严格限制中英文字数

30 阅读1分钟
// 严格限制输入中英文字数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;