Javascript input checked automatically with onblue

In general, when users input, we must check whether the input data is correct, such as only entering numbers but entering characters, whether the data length exceeds the standard, and not entering special characters, and so on. The more frequently checked is usually the password verification, and requires automatic and timely checking, that is, checking as soon as the user inputs stop.

The user input on the web page is automatically checked and verified by javascript on the client, that is, when the user input stops, a javascript event is triggered, and the function is called to check the user input, if it does not meet the requirements, the user is prompted to re-enter. This type of inspection verifies that some javascript can be completed, and some need to communicate with the server to complete. The latter needs to use ajax to communicate with the server and process it according to the value returned by the server.

1. Automatically check if an input is a number javascript

Suppose there is a textbox that can only enter numbers and not characters. When the user completes the input, check immediately. The sample code is as follows:

Html code:

<div>
              Cellphone number: <input type="text" id="mobelId" maxlength="11" onblur="AutomaticallyCheckInput()" />
       </div>

Javascript code:

<script type="text/javascript">
       function AutomaticallyCheckInput() {
              var obj = document.getElementById("mobelId");
              if (!isNumber(obj.value)) {
                     alert("The product price can only enter 11 digits!");
              }
       }
       function isNumber(str) { var rul = /^[0-9]{1,11}$/; return rul.test(str); }
       </script>

The above code requires the user to enter a mobile phone number within 11 digits. If more than 11 digits, letters or symbols are entered, re-entry will be requested; when the user finishes entering, as long as he clicks anywhere(including another textbox) will check.

2. Javascript input checked automatically whether the characters entered by the user exceed the rule length

The textbox has an attribute that limits how many characters the user enters, but it cannot distinguish between DBCS and English, that is, each DBCS character is also counted as a character, which is inconsistent with the actual length, so it is necessary to accurately count the actual length of the characters entered by the user.

Html code:

<div>
              Product introduction: <input type="text" id="prointro" maxlength="200" onblur="countTextLength()" style="width:600px;" />
       </div>

Javascript code:

<script type="text/javascript">
       function countTextLength() {
              var obj = document.getElementById("prointro");
              if (len(obj.value) > 200) {
                     alert("Product introduction can only enter 200 characters!");
              }
       }

function len(str) {
              var n = 0;
              if (str == "") { return n; }
              var arr = str.split("");
              for (var i = 0; i < arr.length; i++) {
                     if (arr[i].charCodeAt(0) < 299) {
                            n++;
                     }
                      else {
                             n += 2;
                     }
              }
              return n;
       }
       </script>

The above code only allows the user to enter 200 characters, that is, only 100 DBCS characters and 200 English letters can be entered. If it exceeds this length, it will prompt.