javascriptの英数字パスワードのバリデーション

Question

jspの英数字のパスワード検証用の関数をjavascriptで作成し、その関数をテキストボックスのonkeypressイベントで呼び出しても動作しません。

function alphanumeric(inputtxt) { 
 
    var mypswd = document.getElementById(inputtxt).value; 
 
    mypswd = mypswd.trim(); 
 
    if (mypswd == "" || mypswd == null) { 
 
    alert("Please enter password"); 
 
    } else if (!mypswd.match((/^(?=.\d)(?=.[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/)) { 
 
    alert(" password must be alphanumeric"); 
 
    } 
 
}

<form name="form1" method="post" action="Register">Username : 
 
    <br> 
 
    <input type="text" name="uname" onkeypress="return checkSpcialChar(event)" onkeydown=" alphanumeric(inputtxt)" /> 
 
    <br/>Password : 
 
    <br> 
 
    <input type="password" name="pwd" onkeypress="return checkSpcialChar(event)" /> 
 
    <br/> 
 
    <br> 
 
    <input type="submit" name="action" value="Submit" onsubmit="check()" /> 
 
    <input type="submit" value="Back" /> 
 
</form>

助けてください。

Answer 1

あなたのコードを少し変更しました。最終的な結果には必要ないものもありました。

主なポイントは次のとおりです。

onkeyup="alphanumeric(this)" 

あなたはイベントがthisを使用して結合させたことを要素に渡すことができます。また、イベントをonkeyupに変更したので、現在入力されている文字を検証できます。

値を取得したら、その要素を使用して現在の値を取得できます。

var mypswd = input.value.trim() 

アラートは本当に迷惑であり、彼らはページでスクリプトまたは相互作用のさらなる実行を阻止するので、私は、ユーザーがのがパスワードの状態のフィードバックを生きる得るように、メッセージが含まれているdivの中に入れました。

アルファニューメリックの検証のみを行う場合は、正規表現を大幅に簡略化して/[^a-z0-9]+/iにすることができます。単純に非英数字をチェックしています。

const message = document.querySelector('.message') 
 

 
function alphanumeric(input) { 
 
    var mypswd = input.value.trim() 
 
    if (mypswd == "" || mypswd == null) { 
 
    message.innerHTML = "Please enter password" 
 
    } else if (mypswd.match(/[^a-z0-9]+/i)) { 
 
    message.innerHTML = "password must be alphanumeric" 
 
    } else { 
 
    message.innerHTML = "All good in the hood" 
 
    } 
 
}

<form name="form1" method="post" action="Register"> 
 
    <div class="message">Please enter a password</div> 
 
    Passsword : 
 
    <input type="text" 
 
    name="pword" 
 
    id="pword" 
 
    onkeyup=" alphanumeric(this)" 
 
    /> 
 
</form>