如何防止用户使用jsx在表单中粘贴特定的特殊字符（仅允许的字符包括（_-。）

Question

I also want to limit the first character to just a number or a letter. This is what I have so far to prevent the user from typing in special characters:

validate(event) {
    const keycode = event.keyCode || event.which || event.type === 'paste';
    const key = String.fromCharCode(keycode);
    const pattern = new RegExp('^[a-zA-Z0-9\\_\\.\\-]$');
    return pattern.test(key) ? key : event.preventDefault();
}

const validateMyField = (currentFieldValue, props) => {
    if (currentFieldValue.match(/^[a-zA-Z0-9\\_\\.\\-]+$/)) {
        return true;
    }
    return false;
};

const templateNameValidator = createValidator(
    validateMyField,
    'You are attempting to paste with characters that are not allowed. Please remove characters and try again. (special characters can only include "_","-",".")'
);

 <Field
    className="usaa-input"
    component={Textarea}
    label="Template Name"
    name="name"
    maxLength={128}
    minRows={1}
    placeholder="Enter Template Name..."
    validate={composeValidators(required, templateNameValidator)}
    onKeyPress={this.validate}
/>

Answer 1

It might be easier to use a controlled input. This is where we get and set the value to and from the state.

this.state = {inputValue: ""}

...

validateBeforeInput(e){
    if(matches the chars we want){
        this.setState({inputValue: e.target.value})    
    }
}

...
<input 
    value={this.state.inputValue}
    onChange{validateBeforeInput} // where the magic happens
/>