Javascript 验证表单中的非法字符

我想为注册表表单中的非法字符添加验证，例如用户名字段

如果用户名字段中有任何字符“！，%&*”表单将不会向后端发送请求。我不知道该怎么开始。我花了几个小时上网，我真的是JS的初学者

这是我的班级：

import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormGroup from 'react-bootstrap/FormGroup';
import FormLabel from 'react-bootstrap/FormLabel';

import './Registration.css'
import RegistrationAlert from './RegistrationAlert.js';

class Registration extends Component{

    constructor(props){
        super(props);
        this.registrationAlert = React.createRef();
    }

    handleSubmit = event => {
        event.preventDefault();
        event.target.className += " was-validated";
        this.registerUser(event.target.username.value,event.target.email.value,event.target.password.value, event.target.firstName.value, event.target.lastName.value,
         event.target.department.value)
    }

    handleChange = event => {
    this.setState({ [event.target.name]: event.target.value});
    }

    registerUser(username, email, password, firstName, lastName, department) {
        fetch('http://localhost:8080/users', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username,
                email: email,
                password: password,
                firstName: firstName,
                lastName: lastName,
                department: department,
            })
        }).then(function(response){
            if (response.status === 200){
                this.showRegistrationAlert("success", "Użytkownik zarejestrowany!", "Możesz się już zalogować.");
            } else if (response.status === 422) {
                this.showRegistrationAlert("danger", "Użytkownik nie został zarejestrowany!", "Prawdopodobnie już istnieje.");
            } else {
                this.showRegistrationAlert("danger", "Użytkownik nie został zarejestrowany!", "Coś nie pykło :(");
            }
        }.bind(this)).catch(function(error){
            this.showRegistrationAlert("danger", "Error", "Napisz do Bartka! :)");
        }.bind(this));
    }


    showRegistrationAlert(variant, heading, message) {
        this.registrationAlert.current.setVariant(variant);
        this.registrationAlert.current.setHeading(heading);
        this.registrationAlert.current.setMessage(message);
        this.registrationAlert.current.setVisible(true);
    }

    render(){
        return (
            <>
        <div className="Register">
        <Form className="needs-validation" onSubmit = {this.handleSubmit}>
                <FormGroup className="firstNameForm" controlId="firstName" size="lg">
                 <FormLabel>Imię</FormLabel>
                 <Form.Control type="text" onChange={this.handleChange} name="firstName" placeholder="Jan" required/>
                </FormGroup>
                <FormGroup className="lastNameForm" controlId="lastName" size="lg">
                  <FormLabel>Nazwisko</FormLabel>
                  <Form.Control type="text" onChange={this.handleChange} name="lastNameName" placeholder="Kowalski" required/>
                 </FormGroup>

                <FormGroup className="usernameForm" controlId="username" size="lg">
                  <FormLabel>Nazwa Użytkownika</FormLabel>
                  <Form.Control type="text" onChange={this.handleChange} name="username" placeholder="Jan.Kowalski" required/>
                </FormGroup>

            <FormGroup className="emailForm" controlId="email" size="lg">
                <FormLabel>E-mail</FormLabel>
                <Form.Control type="text" onChange={this.handleChange} name="email" placeholder="email@comarch.pl" required/>
            </FormGroup>
            
            <FormGroup className="passwordForm" controlId="password" size="lg">
                <FormLabel>Hasło</FormLabel>
                <Form.Control type="password" onChange={this.handleChange} name="password" placeholder="Hasło" required/>
            </FormGroup>

                            <Form.Group>
                              <Form.Label as="legend" column sm={2}>
                                Dział:
                              </Form.Label>
                                <Form.Check
                                  type="radio"
                                  label="HaMag"
                                  name="department"
                                  id="departmentHaMag"
                                  value="Handel/Magazyn"
                                  required
                                />
                                <Form.Check
                                  type="radio"
                                  label="Ksieg"
                                  name="department"
                                  id="departmentKsieg"
                                  value="Ksiegowść"
                                />
                                <Form.Check
                                  type="radio"
                                  label="KiP"
                                  name="department"
                                  id="departmentKiP"
                                  value="Kadry/Płace"
                                />
                            </Form.Group>

            <Button block size ="lg" type ="submit">Zarejestruj</Button>
        </Form>
    </div>

    <RegistrationAlert ref={this.registrationAlert}/>
        </>
            )
        }
    }

export default Registration;```

从'react bootstrap/Form'导入表单；
从“反应引导/按钮”导入按钮；
从“react bootstrap/FormGroup”导入FormGroup；
从“react引导/FormLabel”导入FormLabel；
导入“./Registration.css”
从“/RegistrationAlert.js”导入RegistrationAlert；
类注册扩展了组件{
建造师（道具）{
超级（道具）；
this.registrationAlert=React.createRef（）；
}
handleSubmit=事件=>{
event.preventDefault（）；
event.target.className+=“已验证”；
this.registerUser（event.target.username.value、event.target.email.value、event.target.password.value、event.target.firstName.value、event.target.lastName.value、，
事件、目标、部门、价值）
}
handleChange=事件=>{
this.setState（{[event.target.name]：event.target.value}）；
}
注册者（用户名、电子邮件、密码、姓氏、姓氏、部门）{
取（'http://localhost:8080/users', {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
用户名：用户名，
电邮:电邮,，
密码：密码，
名字：名字，
lastName:lastName，
部门:部门,，
})
}).然后（功能（响应）{
如果（response.status==200）{
这是showRegistrationAlert（“成功”，“乌伊特科夫尼克·扎雷杰斯特罗瓦尼！”，“莫伊斯·西约热扎洛戈瓦奇”）；
}else if（response.status==422）{
这个。showRegistrationAlert（“危险”，“乌伊特科尼克·尼佐斯塔·扎雷杰斯特罗瓦尼！”，“普拉多波尼·朱伊斯特涅耶”）；
}否则{
这个。showRegistrationErt（“危险”，“尤伊特科尼克·尼佐斯塔·扎雷杰斯特罗瓦尼！”，“科尼·皮科：（”）；
}
}.bind（this））.catch（函数（错误）{
showRegistrationAlert（“危险”、“错误”、“Napisz do Bartka！：）”；
}.约束（这个）；
}
ShowRegistrationERT（变量、标题、消息）{
this.registrationAlert.current.setVariant（variant）；
this.registrationAlert.current.setHeading（标题）；
this.registrationAlert.current.setMessage（消息）；
this.registrationAlert.current.setVisible（true）；
}
render（）{
返回(
伊米ę
纳兹维斯科
纳兹瓦·乌伊特科夫尼卡
电子邮件
哈斯
迪亚ł
扎雷杰斯特鲁伊
)
}
}
出口违约登记```

更改handleSubmit函数：

handleSubmit = event => {
    event.preventDefault();
    event.target.className += " was-validated";
    let regex = '.*[\!\,\%\&\*].*'
    if(regex.test(event.target.user)}{
      // show user that he shouldnt be using those chars
    }else{
      this.registerUser(event.target.username.value,event.target.email.value,event.target.password.value, event.target.firstName.value, event.target.lastName.value,
     event.target.department.value)
    }
}

---

请参见以下验证表单的示例：。我希望这对你有帮助