表单验证

盲区：标签，

"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

——————————————————————————表单验证——————————————————————————

js部分:

<script>
		//登录名部分——当输入框失焦点时
		function checkName(){
			var v_nameObj=document.getElementById("name");
			var v_nameValue=v_nameObj.value;
			var v_nameMessageObj=document.getElementById("nameMessage")
			var veg=/^[a-zA-Z0-9_]{6,10}$/;//正则表达式
			//判断规则是否合法
			if(!reg.test(v_nameValue)){
				v_nameMessageObj.innerHTML
					='<font cloor="red" style="font-size:12px">对不起！用户名必须在6-10个字符之间并且只能由数字、字母、下划线组成</font>'
				return false;
			}
			v_nameMessageObj.innerHTML
				='<font cloor="green style="font-size:12px">用户名可用</font>'
			return true;
		}
		//密码部分——当输入框失焦点时
		function checkName(){
			var v_passwordObj=document.getElementById("password");
			var v_passwordValue=v_passwordObj.value;
			var v_passwordMessageObj=document.getElementById("passwordMessage")
			var veg1=/[a-z]/;//正则表达式
			var veg1=/[A-Z]/;
			var veg1=/\d/;
			//判断规则是否合法
			if(v_passwordValue.length<6||v_passwordObj.length>12)){
				v_passwordMessageObj.innerHTML
					='<font cloor="red" style="font-size:12px">对不起！密码必须在6-10个字符之间</font>'
				return false;
			}
			else if(!reg01.test(v_passwordValue||!reg02.test(v_passwordValue||!reg03.test(v_passwordValue)){
				v_passwordMessageObj.innerHTML
					='<font cloor="red" style="font-size:12px">对不起！密码必须同时含有数字和大小写字母</font>'
				return false;
			}
			v_passwordMessageObj.innerHTML
				='<font cloor="green style="font-size:12px">密码可用</font>'
			return true;
		}
		//确认密码部分——当输入框失焦点时
		function checkName(){
			var v_confirmPasswordObj=document.getElementById("confirmPassword");
			var v_confirmPasswordValue=v_confirmPasswordObj.value;
			var v_passwordObj=document.getElementById("password");
			var v_passwordValue=v_passwordObj.value;
			var v_confirmPasswordMessageObj=document.getElementById("confirmPasswordMessage")
			//判断规则是否合法
			if(v_confirmPasswordValue.length!=v_passwordValue){
				v_confirmPasswordMessageObj.innerHTML
					='<font cloor="red" style="font-size:12px">对不起！确认密码和密码不一致</font>'
				return false;
			}
			v_confirmPasswordMessageObj.innerHTML
				='<font cloor="green style="font-size:12px">确认密码可用</font>'
			return true;
		}
		//邮箱部分——当输入框失焦点时
		function checkName(){
			var v_emailObj=document.getElementById("email");
			var v_emailValue=v_emailObj.value;
			var v_emailMessageObj=document.getElementById("emailMessage")
			var veg=/^\w+@\w+\.com(\.cn)$/;//正则表达式
			//判断规则是否合法
			if(veg.test(v_emailValue.length)){
				v_emailMessageObj.innerHTML
					='<font cloor="red" style="font-size:12px">对不起！您的邮箱格式不正确</font>'
				return false;
			}
			emailMessageObj.innerHTML
				='<font cloor="green style="font-size:12px">邮箱可用</font>'
			return true;
		}
		//阅读条款复选框
		function jieShouXieYi(obj){
			var v_submitButObj=document.getElementById("submitBut")
			v_submitButObj.disabled=(!obj.checked)//设置禁用属性
		}
		//点击提交，验证表单
		function checkName(){
			if(!checkName()||!checkPassword()||!checkConfirmPassword()||!checkEmail()||!jieShouXieYi()){
				return false
			}
			return true
		}
	</script>

HTML部分

<form action="xxx.html">
		<table>
			<tr>
				<td>用户名</td>
				<td>
					<input type="text" onblur="checkName()" id="name"/>
					<span id="nameMessage">（可包含a-z、0-9和下划线）</span>
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" onblur="checkPassword" id="password"/>
					<span id="passwordMessage">（至少包含6个字符）</span></td>
			</tr>
			<tr>
				<td>再次输入密码</td>
				<td>
					<input type="password" onblur="checkConfirmPassword" id="confirmPassword"/>
					<span id="confirmPassword"></span>
				</td>
			</tr>
			<tr>
				<td>电子邮件</td>
				<td>
					<input type="text" onblur="checkEmail" id="email"/>
					<span id="emailMessage">（必须包含@字符）</span>
				</td>
			</tr>
			<tr>
				<td>
					<textarea row="15" cols="25">欢迎阅读服务条款协议……</textarea>
					<input type="checkbox" onclick="jieShouXieYi(this)"/>我已阅读并接受协议
					<span id="emailMessage"></span>
				</td>
			</tr>
			<tr>
				<input type="submit" disabled value="同意服务条款，提交注册信息" id="submitBut" onclick="return checkForm()"/>
				<input type="reset" value="重置"></input>
			</tr>
		</table>
	</form>