Form表单验证--最简单版本

输入框动态提示，提交前逐项验证填写状态，简单记录一下，备查。

<STYLE type="text/css">
.formone_left{float:left; width:110px; padding:0 14px 0 0; text-align:right; background:url("images/xx.jpg") no-repeat right 0;}
.formone_right{float:left; width:820px; padding:0 0 0 10px; }
.formone_right input{background:none; border:solid 1px #b4b4b4; width:190px; height:28px; line-height:28px; }
.lang input{width:450px;}
.formone{padding:20px 0; clear:both; font-size:14px; color:#4b4b4b;}
</STYLE>
 

<FORM method="post" action="/ordersave.html" name="form1" onsubmit="return checkform();">
	<div class="cps">
			<div class="shr">填写收货人信息</div>
			<div class="formone">
				<div class="formone_left">收货人</div><div class="formone_right"><INPUT type="text" id="name" name="name" style="color:#b8b8b8;" onfocus="if (this.value==this.defaultValue){this.value=''; this.style.color='#333333';}" onblur="if(this.value==''){this.value=this.defaultValue; this.style.color='#b8b8b8';}" value="真实有效签收人"></div>
			</div>
			<div class="formone">
				<div class="formone_left">手机</div><div class="formone_right"><INPUT type="text" id="phone" name="phone" style="color:#b8b8b8;" onfocus="if (this.value==this.defaultValue){this.value=''; this.style.color='#333333';}" onblur="if(this.value==''){this.value=this.defaultValue; this.style.color='#b8b8b8';}" value="必须填写11位手机号码"></div>
			</div>
			<div class="formone">
				<div class="formone_left">详细地址</div><div class="formone_right lang"><INPUT type="text" id="address" name="address"style="color:#b8b8b8;" onfocus="if (this.value==this.defaultValue){this.value=''; this.style.color='#333333';}" onblur="if(this.value==''){this.value=this.defaultValue; this.style.color='#b8b8b8';}" value="省、市、县（区）、街道 具体地址"></div>
			</div>
			<div class="formone">
				<div class="formone_left" style="background:none;">邮编</div><div class="formone_right"><INPUT type="text" name="postcode"></div>
			</div>
			<div class="line"><div class="tj"><INPUT type="submit" value="确认" class="tijiao"> <INPUT type="button" class="tijiao" value="取消" onclick="window.location.href='/';"></div></div>
		
	</div>
	</FORM>

<SCRIPT type="text/javascript">
	//提交前检查
	function checkform()
	{
		if (document.form1.name.value=="真实有效签收人") {
			alert("请输入收货人姓名！");
			form1.name.focus(); 
			return false;
		}
		if (document.form1.phone.value=="必须填写11位手机号码") {
			alert("请输入手机号码！");
			form1.phone.focus(); 
			return false;
		}
		var pr = /^1[3|5|8][0-9]{9}$/;
		if(!pr.test(document.form1.phone.value)){
			alert("手机号码格式有误！");
			form1.phone.focus(); 
			return false;
		}
		if (document.form1.address.value=="省、市、县（区）、街道 具体地址") {
			alert("请输入详细地址！");
			form1.address.focus(); 
			return false;
		}
		return true;
	}
</SCRIPT>