1. 程式人生 > >如何實時監聽input輸入框裡的字元是否合法

如何實時監聽input輸入框裡的字元是否合法

問題:

    input裡面只允許輸入字母與數字, 一旦出現其他符號, 進行報錯

準備解決:

    jquery, 

基本思路:

    每當按鍵擡起時(keyUp事件), 就會進行字串匹配, 如果錯誤, 進行錯誤提示(這裡為了演示用alert 進行提示, 讀者可以自己進行設定)

解決程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<!-- 這裡引入jquery, 讀者根據實際情況進行設定 -->
	<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
</head>
<body>
	<input type="text" name="username" id="username">
</body>
<script type="text/javascript">
	//進行按鍵擡起時事件監聽
	    $("#username").keyup(
          function(){

          	// 只允許輸入字母(大小寫)數字, 正則匹配根據需要自己改
            reg = /^[A-Za-z0-9]$/;

            //獲取輸入框中的東西
            var str = $("#username").val();

            // 如果符合正則表示式,在後臺輸出true(根據實際需要自己設定)
            if(reg.test(str)){
            	console.log("true");
            	
            } else{// 如果不符合正則表示式,彈出false(根據實際需要自己設定)
            	alert("false");
            };
          }
        );
</script>
</html>

模板在此, 根據需要自己修改