本文实例讲述了js进行表单验证的方法。分享给大家供大家参考。具体实现方法如下： 1. 传统的表单验证代码 复制代码 代码如下: 表单验证 <br /> <br /> function $(id) { <br /> return document.getElementById(id); <br /> } <br /> <br /> function check() { <br /> var email = $("email").value; <br /> var password = $("password").value; <br /> var repassword = $("repassword").value; <br /> var name = $("name").value; <br /> <br /> if(email == "") { <br /> alert("Email值不能为空"); <br /> $("email").focus(); <br /> return false; <br /> } <br /> <br /> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br /> alert("邮箱格式不正确,必须包含@和."); <br /> $("email").focus(); <br /> return false; <br /> } <br /> <br /> if(password == "") { <br /> alert("密码不能为空"); <br /> $("password").focus(); <br /> return false; <br /> } <br /> <br /> if(password.length < 6) { <br /> alert("密码长度必须大于或者等于6"); <br /> $("password").focus(); <br /> return false; <br /> } <br /> <br /> if(repassword != password) { <br /> alert("两次输入的密码不一致"); <br /> $("repassword").focus(); <br /> return false; <br /> } <br /> <br /> if(name == "") { <br /> alert("姓名不能为空"); <br /> $("name").focus(); <br /> return false; <br /> } <br /> <br /> for(var i = 0; i < name.length; i++) { <br /> var j = name.subString(i , i+1); <br /> if(isNaN(j) == false) { <br /> alert('姓名中不能包含数字'); <br /> $("name").focus(); <br /> return false; <br /> } <br /> } <br /> } <br /> Email: 密码: 重输密码: 姓名： 2. 输入框后面有提示信息的表单验证 复制代码 代码如下: 表单验证 <br /> <br /> function $(id) { <br /> return document.getElementById(id); <br /> } <br /> <br /> function check() { <br /> var email = $("email").value; <br /> var password = $("password").value; <br /> var repassword = $("repassword").value; <br /> var name = $("name").value; <br /> <br /> $("emailinfo").innerHTML = ""; <br /> $("passwordinfo").innerHTML = ""; <br /> $("repasswordinfo").innerHTML = ""; <br /> $("nameinfo").innerHTML = ""; <br /> <br /> if(email == "") { <br /> $("emailinfo").innerHTML = "Email值不能为空"; <br /> $("email").focus(); <br /> return false; <br /> } <br /> <br /> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br /> $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; <br /> $("email").focus(); <br /> return false; <br /> } <br /> <br /> if(password == "") { <br /> $("passwordinfo").innerHTML = "密码不能为空"; <br /> $("password").focus(); <br /> return false; <br /> } <br /> <br /> if(password.length < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> $("password").focus(); <br /> return false; <br /> } <br /> <br /> if(repassword != password) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> $("repassword").focus(); <br /> return false; <br /> } <br /> <br /> if(name == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> $("name").focus(); <br /> return false; <br /> } <br /> <br /> for(var i = 0; i < name.length; i++) { <br /> var j = name.subString(i , i+1); <br /> if(isNaN(j) == false) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> $("name").focus(); <br /> return false; <br /> } <br /> } <br /> } <br /> Email: 密码: 重输密码: 姓名： 效果图如下所示： 3. 在输入框失去焦点时触发校验函数 复制代码 代码如下: 表单验证 <br /> function $(id) { <br /> return document.getElementById(id); <br /> } <br /> <br /> function check() { <br /> var email = $("email").value; <br /> var password = $("password").value; <br /> var repassword = $("repassword").value; <br /> var name = $("name").value; <br /> <br /> $("emailinfo").innerHTML = ""; <br /> $("passwordinfo").innerHTML = ""; <br /> $("repasswordinfo").innerHTML = ""; <br /> $("nameinfo").innerHTML = ""; <br /> <br /> if(email == "") { <br /> $("emailinfo").innerHTML = "Email值不能为空"; <br /> return false; <br /> } <br /> <br /> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br /> $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; <br /> return false; <br /> } <br /> <br /> if(password == "") { <br /> $("passwordinfo").innerHTML = "密码不能为空"; <br /> return false; <br /> } <br /> <br /> if(password.length < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> return false; <br /> } <br /> <br /> if(repassword != password) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> return false; <br /> } <br /> <br /> if(name == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> return false; <br /> } <br /> <br /> for(var i = 0; i < name.length; i++) { <br /> var j = name.subString(i , i+1); <br /> if(isNaN(j) == false) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> return false; <br /> } <br /> } <br /> } <br /> <br /> function checkEmail() { //校验Email <br /> $('emailinfo').innerHTML = ""; <br /> var email = $('email').value; <br /> if(email == "") { <br /> $('emailinfo').innerHTML = "Email值不能为空"; <br /> return false; <br /> } <br /> <br /> if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { <br /> $('emailinfo').innerHTML = "Email必须包含@和."; <br /> return false; <br /> } <br /> } <br /> <br /> function checkPassword() { //校验密码 <br /> $('passwordinfo').innerHTML = ""; <br /> var password = $('password').value; <br /> if(password == "") { <br /> $("passwordinfo").innerHTML = "密码不能为空"; <br /> return false; <br /> } <br /> <br /> if(password.length < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> return false; <br /> } <br /> } <br /> <br /> function checkRepassword() { //校验重新输入的密码 <br /> $('repassword').innerHTML = ""; <br /> var repassword = $('repassword').value; <br /> if(repassword != password) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> return false; <br /> } <br /> } <br /> <br /> function checkName() { //校验姓名 <br /> $('nameinfo').innerHTML = ""; <br /> var name = $('name').value; <br /> if(name == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> return false; <br /> } <br /> <br /> for(var i = 0; i < name.length; i++) { <br /> var j = name.subString(i , i+1); <br /> if(isNaN(j) == false) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> return false; <br /> } <br /> } <br /> } <br /> Email: 密码: 重输密码: 姓名： 效果图如下所示： 希望本文所述对大家的javascript程序设计有所帮助。
