パスワード入力における入力文字、文字数制限とvalidationチェックについて

前提・実現したいこと

Ractとreact-bootstrapを使用して、ログイン用のユーザー情報登録画面を作成しています。
画面項目の中にパスワードを入力する欄があるのですが、
このパスワードには、以下の入力条件にしたいと思っています。

　・半角英数のみ（半角英数以外の文字は入力欄には表示しない）
・8文字以上
・登録ボタン押下で、validationチェックを行う

発生している問題

onChangeイベントで半角英数以外の文字を弾いている（入力欄には半角英数しか入っていない）のですが、
例えば「aaa+++++」と入力した場合、入力欄には「aaa」としか表示されませんが、
この状態で登録ボタンを押下するとvalidationで引っかからずに抜けてしまいます。
（+++++が文字数としてカウントされていると思われます。）

該当のソースコード

jsx
1 // コントロール定義
2 <Form id="frm_user" noValidate validated={stValidated} onSubmit={onExec}>
3   <Form.Group as={Row}>
4     <Form.Label column md="12">
5       <u>ID</u>
6     </Form.Label>
7     <Col md="12">
8       <Form.Control
9         id="ログインID"
10         type="text"
11         onChange={onChangeText}
12         value={LoginID || ""}
13         placeholder="半角英数のみ有効"
14         required
15       />
16       <Form.Control.Feedback type="invalid">
17         ログインIDを入力してください！
18       </Form.Control.Feedback>
19     </Col>
20   </Form.Group>
21
22   <Form.Group as={Row}>
23     <Form.Label column md="4">
24       <u>パスワード</u>
25     </Form.Label>
26     <Col md="12">
27       <Form.Control
28         id="password"
29         type="password"
30         value={PassWord || ""}
31         onChange={onChangeText}
32         placeholder="8文字以上半角英数のみ有効"
33         minLength="8"
34         required
35       />
36       <Form.Control.Feedback type="invalid">
37         8文字以上、半角英数で入力してください。
38       </Form.Control.Feedback>
39     </Col>
40   </Form.Group>
41 </Form>
42
43　// テキスト変更イベント
44  const onChangeText = (e) => {
45    switch (e.target.id) {
46      case "ID":
47        if (e.target.value.match(/^[A-Za-z0-9_-]*$/)) setLoginID(e.target.value);
48        break;
49
50      case "password":
51        if (e.target.value.match(/^[A-Za-z0-9_-]*$/)) setPassWord(e.target.value);
52        break;
53
54      default:
55        break;
56    }
57  };

試したこと

patternを追加してみました。
登録ボタンを押下した時点で、半角英数以外が入っていればvalidationに引っかかりますが、
半角英数以外の文字が入力できてしまいます。

jsx
1   <Form.Group as={Row}>
2     <Form.Label column md="4">
3       <u>パスワード</u>
4     </Form.Label>
5     <Col md="12">
6       <Form.Control
7         id="password"
8         type="password"
9         value={PassWord || ""}
10         onChange={onChangeText}
11         placeholder="8文字以上半角英数のみ有効"
12         minLength="8"
13         pattern="[a-zA-Z0-9]+"
14         required
15       />
16       <Form.Control.Feedback type="invalid">
17         8文字以上、半角英数で入力してください。
18       </Form.Control.Feedback>
19     </Col>
20   </Form.Group>
21 </Form>
22