JavaScript前端form验证(不用正则表达式)-优快云博客

本文介绍了一个简单的表单验证实现方案，通过JavaScript对HTML表单进行有效性检查，包括必填项验证、密码一致性验证等，并使用CSS对错误输入进行高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注:需要配套的js跟html文件
困难的地方是如何维持,class的累加! invalid这个class是累加在固有class上的，中间用空格隔开!
本文参考《JavaScript & Ajax》文中对此的校验函数之前嵌套太多，看了头大。故我将其拆分成独立的函数
case条件处需要优化，还有其他地方也需要修改!
纪念下这是我第一次发真正意义的开发相关的文章!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Car Picker</title>
	<script language="Javascript" type="text/javascript" src="validate.js">
	</script>	
	<link rel="stylesheet" href="validate.css" />
</head>
<body>
<h2 align="center">Car Picker</h2>
<form action="#">
	<p><label for="emailAddr">Email Address:
		<input id="emailAddr" type="text" size="30" class="reqd email" />
	</label></p>
	<p><label for="color">Colors:
		<select id="color" class="reqd">
			<option value="" selected="selected">Choose a color</option>
			<option value="Red">Red</option>
			<option value="Green">Green</option>
			<option value="Blue">Blue</option>
		</select>
	</label></p>
	<p>Options:
		<label for="sunroof"><input type="checkbox" name="checkes" id="sunroof" value="checkCar" class="checkes" />Sunroof (Two door only)</label>
		<label for="pWindows"><input type="checkbox" name="checkes" id="pWindows" value="checkCar" class="checkes" />Power Windows</label>
	</p>
	<p><label for="radios">Doors:&nbsp;&nbsp;
            <input type="radio" id="twoDoor" name="radios" value="twoDoor" class="radios" />Two
            <input type="radio" id="fourDoor" name="radios" value="fourDoor" class="radios" />Four
	    </label></p>
    <!--
    <p><label for="zip">Enter your Zip code or pick the dealer nearest you:<br />
		Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList reqd " />
		<select id="dealerList" size="4" class="zip">
			<option value="California--Lemon Grove">California--Lemon Grove</option>
			<option value="California--Lomita">California--Lomita</option>
			<option value="California--Long Beach">California--Long Beach</option>
			<option value="California--Los Alamitos">California--Los Alamitos</option>
			<option value="California--Los Angeles">California--Los Angeles</option>
		</select>
	</label></p>
	-->
	<p><input type="submit" value="Submit" />&nbsp;<input type="reset" /></p>
</form>
</body>
</html>

body {
		color:#000;
		background-color:#fff;
}
input.invalid{
		background-color:#ff9;
		border:2px red inset;
}

span.innerHtml{
   border:1px blue inset; 
}

label.invalid{
		color:#f00;
}

window.onload = initForm;

String.prototype.trim = function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

function initForm(){
    var formsArr = document.forms;
    for(var i=0;i<formsArr.length;i++){
        var formF = formsArr[i];
        formF.onsubmit = function(){preSubmitForm(formF)};
    }
    document.getElementById("sunroof").onclick = doorSet;
}

function preSubmitForm(formF){
    var formAllTag = formF.getElementsByTagName("*");
    for(var i=0;i<formAllTag.length;i++){
        var formTag = formAllTag[i];
        if(!validate(formTag)){
            formTag.focus();
            if(formTag.nodeName=="INPUT"){
                formTag.select();
            }
            return false;
        }
    }
    return true;
}

function validate(formTag){
    var tagClassPrim = formTag.className;
    var classPrim = tagClassPrim.split(" ");
    var classOut = "";
    if(null!=classPrim && classPrim.length>0){
        for(var i=0;i<classPrim.length;i++){
            classOut += convertClass(formTag,classPrim[i]);
        }
        formTag.className = classOut;
    }

    if(classOut.indexOf("invalid")>-1){
        strongLabel(formTag.parentNode);
        return false;
    }
    return true;
}

function convertClass(formTag,classSingle){
    var newClass = "";
    switch(classSingle){
        case "":
        case "invalid":
             break;
        case "reqd":
             if(formTag.value.trim()==""){
                 newClass = " invalid "+classSingle;
             }else{
                 newClass = " "+classSingle;
             }
             break;
        case "passwd1":
             if(!checkPasswd(formTag,classSingle)){
                newClass = " invalid "+classSingle;
             }else{
                 newClass = " "+classSingle;
             }
             break;
        case "checkes":     
        case "radios":
             if(!checkCar(classSingle)){
                newClass = " invalid "+classSingle;
             }else{
                newClass = " "+classSingle;
             }
             break;
        case "zip":
             if(!checkZip(formTag,classSingle)){
                newClass = " invalid "+classSingle;
             }else{
                newClass = " "+classSingle;  
             }
        default:
             newClass = " "+classSingle;
    }
    return newClass;
}

function checkPasswd(forTag,classSingle){
    var passwd1 = document.getElementById(classSingle);

    var passErrObj = document.getElementById("passErrorHint");
    if(passwd1.value!=forTag.value){

        passErrObj.className = "innerHtml";
        passErrObj.innerHTML = "密码前后不一致";
        return false;
    }
    passErrObj.className="";
    passErrObj.innerHTML="";
    return true;
}

function strongLabel(labelTag){
    if(labelTag.nodeName=="LABEL"){
        labelTag.className += " invalid "; 
    }
}

function checkCar(classSingle){
        var checkes = document.getElementsByName(classSingle);
		if(null==checkes || null==checkes.length){
			return false;
		}else{
			for(var i=0;i<checkes.length;i++){
				if(checkes[i].checked){
					return true;
				}
			}
			return false;
		}
}

function checkZip(formTag){
    var zipStr = formTag.value;
    for(var i=0;i<zipStr.length;i++){
        var intCode = parseInt(zipStr.charAt(i));
        if(intCode==NaN){
            return false;
        }
        if(intCode<0||intCode>9){
            return false;
        }
    }
    return true;
}

function  doorSet(){
    if(this.checked){
       document.getElementById("twoDoor").checked = true;
    }else{
       document.getElementById("twoDoor").checked = false; 
    }
}