reactjs - 如何检查字符串是否包含带有反应的数字

Question

我正在构建一个用户验证网站，我希望每个输入都验证输入的字符串是否:

1. 首字母大写
2. 不包含数字
3. 不包含“$%^&*()”

我做了第一个任务，但我不能做最后一个。

我试过 !isNaN(firstName) === true 但它不起作用

import React, { Component } from 'react';

class Profile extends Component {
  state = {
    details: {
      firstName: '',
      lastName: '',
      ID: '',
      Email: ''
    },
    error: false,
    complete: false
  };

  OnSubmit = e => {
    e.preventDefault();
    const { firstName } = this.state.details;
    if (
      firstName.charAt(0) !== firstName.charAt(0).toUpperCase() &&
      !isNaN(firstName) === true
    ) {
      this.setState({ error: true });
    } else {
      this.setState({ complete: true });
    }
  };

  OnChange = e => {
    e.preventDefault();
    this.setState({
      details: { ...this.state.details, [e.target.name]: e.target.value }
    });
  };

  render() {
    return (
      <div>
        <div className="container text-center mt-4" style={{ width: '500px' }}>
          <form className="px-4 py-3" onSubmit={this.OnSubmit}>
            <div className="form-group">
              {this.state.error === true ? (
                <p className="text-danger">
                  Some of the details are wrong check the fields above
                </p>
              ) : null}
              <label>First Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="firstName"
              />
            </div>
            <div className="form-group">
              <label>Last Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="lastName"
              />
            </div>
            <div className="form-group">
              <label>ID Number:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="ID"
              />
            </div>
            <div className="form-group">
              <label>Email:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="Email"
              />
            </div>
            <button type="submit" className="btn btn-secondary mt-3">
              Check
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default Profile;

Answer 1

function validateName(name) {
  var isValidName = true;
  if(/[!@#$%^&*(),.?":{}|<>]/g.test(name) || !/^[A-Z]/.test(name) || /\d+/g.test(name)) {
    isValidName = false;
  }
  return isValidName;
}

validateName("David")