JavaScript form validation

The input box, drop-down box, etc. of the form can receive user input, so using JavaScript to operate the form can obtain the content entered by the user, or set new content for an input box.

The input controls of HTML forms mainly include the following types:

Text box, corresponding <input type="text">, , used to enter text;

Radio button, corresponding<input type="radio">, used to select one item;

Check box, The corresponding <input type="checkbox"> is used to select multiple items; the

drop-down box, the corresponding <select> is used to select one Item;

Hidden text, corresponding <input type="hidden">, is not visible to the user, but the hidden text will be sent to the server when the form is submitted.


JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before the data is sent to the server.

Form data often requires the use of JavaScript to verify its correctness:

Verify whether the form data is empty?
Verify whether the input is a correct email address?
Verify whether the date is entered correctly?
Verify whether the form input content is numeric?

The following function is used to check whether the user has filled in the required (or required) items in the form. If the required field or required field is empty, the warning box will pop up and the return value of the function is false, otherwise the return value of the function is true (meaning there is no problem with the data):

function CheckForm ()
{
if (document.form.name.value.length == 0) {
alert("Please enter your name!");
document.form.name.focus( );
return false;
}
return true;
}

##Chinese/English/Number/E-mail address legality judgment:

function isEnglish(name) //英文值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}

function isChinese(name) //中文值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}

function isMail(name) // E-mail值检测

if(! isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}

function isNumber(name) //数值检测

if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) { 
if(name.charAt(i) < "0" || name.charAt(i) > "9")
return false;
}
return true;
}

function CheckForm()

if(! isMail(form.Email.value)) { 
alert("您的电子邮件不合法!");
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) { 
alert("英文名不合法!");
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) { 
alert("中文名不合法!");
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) { 
alert("邮政编码不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}

Continuing Learning
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var password = $("password").value; var repassword = $("repassword").value; var name = $("name").value; $("emailinfo").innerHTML = ""; $("passwordinfo").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(email == "") { $("emailinfo").innerHTML = "Email值不能为空"; $("email").focus(); return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; $("email").focus(); return false; } if(password == "") { $("passwordinfo").innerHTML = "密码不能为空"; $("password").focus(); return false; } if(password.length < 6) { $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; $("password").focus(); return false; } if(repassword != password) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; $("repassword").focus(); return false; } if(name == "") { $("nameinfo").innerHTML = "姓名不能为空"; $("name").focus(); return false; } for(var i = 0; i < name.length; i++) { var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; $("name").focus(); return false; } } } </script> </head> <body> <form name="login_form" method="post" onsubmit="return check()"> <div> Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span> </div> <br> <div> 密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> </div> <br> <div> 重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> </div> <br> <div> 姓名:<input type="text" name="name" id="name" /><span id="nameinfo"></span> </div> <br> <div> <input type="submit" value="注册" /> </div> </form> </body> </html>
submitReset Code