js进行表单验证实例分析_javascript技巧

1. 传统的表单验证代码

代码如下:






function $(id) {
return document.getElementById(id);
}

function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;

if(email == "") {
alert("Email值不能为空");
$("email").focus();
return false;
}

if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("邮箱格式不正确,必须包含@和.");
$("email").focus();
return false;
}

if(password == "") {
alert("密码不能为空");
$("password").focus();
return false;
}

if(password.length < 6) {
alert("密码长度必须大于或者等于6");
$("password").focus();
return false;
}

if(repassword != password) {
alert("两次输入的密码不一致");
$("repassword").focus();
return false;
}

if(name == "") {
alert("姓名不能为空");
$("name").focus();
return false;
}

for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含数字');
$("name").focus();
return false;
}
}
}

2. 输入框后面有提示信息的表单验证

代码如下:






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;
}
}
}

效果图如下所示：

3. 在输入框失去焦点时触发校验函数
代码如下:





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值不能为空";
return false;
}

if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
return false;
}

if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
return false;
}

if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
return false;
}

if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
return false;
}

if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
return false;
}

for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含数字';
return false;
}
}
}

function checkEmail() { //校验Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "Email值不能为空";
return false;
}

if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email必须包含@和.";
return false;
}
}

function checkPassword() { //校验密码
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
return false;
}

if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
return false;
}
}

function checkRepassword() { //校验重新输入的密码
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
return false;
}
}

function checkName() { //校验姓名
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
return false;
}

for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含数字';
return false;
}
}
}

效果图如下所示：

希望本文所述对大家的javascript程序设计有所帮助。