Home > Developer > JavaScript
Another way to avoid invalid data is to block invalid input when users enter data. For example, when users enter bank card numbers, users must enter numbers, if you enter a non-numeric character, a prompt is displayed.
The following code is provided:
[Html] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> block non-numeric characters </title>
<Style>
Body {font: 10px ;}
Span {color: red ;}
</Style>
<Script>
Function is_number (e ){
// In IE, the Event object uses keyCode to obtain the Unicode encoding of the entered characters
// The Event object in the DOM uses charCode to obtain the Unicode encoding of the entered characters
Var char_code = e. charCode? E. charCode: e. keyCode;
// In Unicode encoding, 0 ~ The decimal value of 9 is 48 ~ Between 57, 0 is 48, 9 is 57
If (char_code <48 | char_code> 57 ){
Alert ("only numbers allowed ");
Return false;
}
Else {
Return true;
}
}
</Script>
</Head>
<Body>
<Form name = "user_info" method = "post">
<Table width = "400" height = "1" border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<Td align = "right"> User name: </td>
<Td align = "left"> <input type = "text" name = "user_name" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> password: </td>
<Td align = "left"> <input type = "password" name = "user_pwd" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> bank account: </td>
<Td align = "left"> <input type = "text" name = "user_account_no" size = "15" onkeypress = "return is_number (event) "/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> Email: </td>
<Td align = "left"> <input type = "text" name = "user_email" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> Personal Profile: </td>
<Td align = "left"> <textarea name = "user_intro" cols = "16" rows = "5"> </textarea> <span> * </span> </ td>
</Tr>
<Tr>
<Td align = "right"> </td>
<Td align = "left"> <input type = "submit" value = "submit" onclick = "return check_form ()"/> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> block non-numeric characters </title>
<Style>
Body {font: 10px ;}
Span {color: red ;}
</Style>
<Script>
Function is_number (e ){
// In IE, the Event object uses keyCode to obtain the Unicode encoding of the entered characters
// The Event object in the DOM uses charCode to obtain the Unicode encoding of the entered characters
Var char_code = e. charCode? E. charCode: e. keyCode;
// In Unicode encoding, 0 ~ The decimal value of 9 is 48 ~ Between 57, 0 is 48, 9 is 57
If (char_code <48 | char_code> 57 ){
Alert ("only numbers allowed ");
Return false;
}
Else {
Return true;
}
}
</Script>
</Head>
<Body>
<Form name = "user_info" method = "post">
<Table width = "400" height = "1" border = "0" cellpadding = "0" cellspacing = "0">
<Tr>
<Td align = "right"> User name: </td>
<Td align = "left"> <input type = "text" name = "user_name" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> password: </td>
<Td align = "left"> <input type = "password" name = "user_pwd" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> bank account: </td>
<Td align = "left"> <input type = "text" name = "user_account_no" size = "15" onkeypress = "return is_number (event) "/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> Email: </td>
<Td align = "left"> <input type = "text" name = "user_email" size = "15"/> <span> * </span> </td>
</Tr>
<Tr>
<Td align = "right"> Personal Profile: </td>
<Td align = "left"> <textarea name = "user_intro" cols = "16" rows = "5"> </textarea> <span> * </span> </ td>
</Tr>
<Tr>
<Td align = "right"> </td>
<Td align = "left"> <input type = "submit" value = "submit" onclick = "return check_form ()"/> </td>
</Tr>
</Table>
</Form>
</Body>
</Html>
In the preceding code, the is_number () function is used to block non-numeric characters. In the function, Unicode encoding is obtained through the attribute of the Event object. for IE browser, the keyCode attribute is used, and for DOM browser, the charCode attribute is used. In Unicode encoding, 0 ~ The 9 encoding is 48 ~ For consecutive values between 57 (decimal), the encoding of 0 is 48, and that of 9 is 57. When the encoding by pressing the key exceeds 48 ~ 57.
Note:
The IE browser does not have the charCode attribute. the keyCode attribute obtains the same value as the charCode attribute in the DOM in the keypress event and the Unicode encoding of the key pressed.
The is_number () function is assigned the onkeypress event handle of the bank account text box (triggered when the key is pressed and released). When you type a character, the function checks the validity of the character you typed. If a non-numeric character is detected, false is returned. The default operation of the keypress event is to type a character after the button is opened. When the onkeypress event handle is set to false, the default operation is blocked.
Note:
When assigning the is_number () function to the onkeypress event handle, use the return keyword to prevent non-numeric characters from being typed.
Over !!!
From SongYanJun2011
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
