用户注册表单验证-优快云博客

本文介绍了一个使用JavaScript进行客户端表单验证的实例。该实例包括用户名、密码、性别等字段的验证逻辑，并通过修改HTML元素内容来显示错误信息。

<HTML>
	<head>
	<title>用户注册</title>
<Script language="JavaScript">
function checkForm()
{
	var canSubmit = true;

	if(frm.username.value == ""){
		canSubmit = false;
		document.all("lblUsername").innerHTML="<font color='red'>请填写用户名</font><input type='button' value='详细...'>";
	}else{
		document.all("lblUsername").innerHTML="";
	}

	if(frm.password.value == ""){
		canSubmit = false;
		document.all("lblPassword").innerHTML="<font color='red'>请填写密码</font>";
	}else{
		document.all("lblPassword").innerHTML="";
	}

	if(frm.password.value != frm.passwordCfm.value){
		canSubmit = false;
		document.all("lblPasswordCfm").innerHTML="<font color='red'>两次输入的密码不一致</font>";
	}else{
		document.all("lblPasswordCfm").innerHTML="";
	}

	if(!checkInputs(frm.sex)){
		canSubmit = false;
		document.all("lblSex").innerHTML="<font color='red'>请选择性别</font>";
	}else{
		document.all("lblSex").innerHTML="";
	}

	if(frm.city.selectedIndex < 1){
		canSubmit = false;
		document.all("lblCity").innerHTML="<font color='red'>请选择城市</font>";
	}else{
		document.all("lblCity").innerHTML="";
	}


	if(!checkInputs(frm.aihao)){
		canSubmit = false;
		document.all("lblAihao").innerHTML="<font color='red'>请至少选择一项爱好</font>";
	}else{
		document.all("lblAihao").innerHTML="";
	}

	if(frm.desc.value == ""){
		canSubmit = false;
		document.all("lblDesc").innerHTML="<font color='red'>请填写个人简介</font>";
	}else{
		document.all("lblDesc").innerHTML="";
	}

	/*
	if(canSubmit){
		frm.submit();
	}
	*/
	return canSubmit;
	
}

function checkInputs(objArray){
	var result = false;
	for(i=0; i<objArray.length;i++){
		if(objArray[i].checked){
			result = true;
			break;
		}
	}
	return result;
}

</Script>

	</head>
	<BODY>
		<form name="frm">
		<TABLE WIDTH="600" HEIGHT="50" BORDER="1"  cellSpacing="0" cellPadding="0">
			
			
			<TR valign="top">
				<TD align="right">用户名：</TD><TD><input type="text" name="username" value=""><span id="lblUsername"></span></TD>
			</TR>
			<TR valign="top">
				<TD align="right">密码：</TD><TD><input type="password" name="password" value=""><span id="lblPassword"></span></TD>
			</TR>
			<TR valign="top">
				<TD align="right">确认密码：</TD><TD><input type="password" name="passwordCfm" value=""><span id="lblPasswordCfm"></span></TD>
			</TR>
			<TR valign="top">
				<TD align="right">性别：</TD><TD><input type="radio" name="sex" value="男">男    <input type="radio" name="sex"value="女">女&nbsp;&nbsp;<span id="lblSex"></span></TD>
			</TR>
			<TR valign="top">
				<TD align="right">所在地：</TD>
				<TD>
					<select name="city">
						<option value="NONE">---请选择---</option>
						<option value="CQ">重庆</option>
						<option value="SC">四川</option>
					</select>
					<span id="lblCity"></span>
				</TD>
			</TR>
			<TR valign="top">
				<TD align="right">头像：</TD><TD><input type="file" name="photo" value=""></TD>
			</TR>
			<TR valign="top">
				<TD align="right">爱好：</TD>
				<TD>
					<input type="checkbox" name="aihao" value="运动">运动
					<input type="checkbox" name="aihao" value="读书">读书
					<input type="checkbox" name="aihao" value="看碟">看碟
					<div id=lblAihao></div>
				</TD>
			</TR>
			<TR valign="top">
				<TD align="right" valign="center">自我简介：</TD><TD><textarea name="desc" rows="6" cols="40"></textarea><span id="lblDesc"></span></TD>
			</TR>
			<TR valign="center">
				<TD align="center"  colspan="2" valign="center">
				<input type="submit"  value="注册" onclick="return checkForm()">
				<input type="reset" name="cancel" value="重填">
				</TD>
			</TR>
		</TABLE>
		</form>
	</BODY>
</HTML>

*****现在用document.getElementById("").innerHTML 了!!!!

不推荐...

document.all("lblDesc").innerHTML="";