JavaScript表单校验

单项校验

效果展示：

html部分

<form>
	<table align="center">
		<tr>
			<td>用户名</td>
			<td>
				<input type="text" name="username" id="username"/>
				<span id="msg"></span>
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td>
				<input type="password" name="password" id="password"/>
			</td>
		</tr>
		<tr>
			<td>
				<input type="button" value="注册" onclick="check()"/>
			</td>
		</tr>
	</table>
</form>

JavaScript部分

<script>
	function check(){
		//正则表达式,校验是否为空
		var ver = /^\s*$/;
		var username = document.getElementById("username").value;//获取到username的值
		var msg = document.getElementById("msg");//获取到msg对象
		if(ver.test(username)){
			msg.innerHTML="<font color='red'>用户名不能为空！</font>";//innerhtml能够解析html标签
			return false;
		}
		return true;
	}
</script>

多项校验

进一步完善


html代码

<form>
	<table align="center">
		<tr>
			<td>用户名</td>
			<td>
				<input type="text" name="username" id="username"/>
				<span id="usernameMsg"></span>
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td>
				<input type="password" name="password" id="password"/>
				<span id="passwordMsg"></span>
			</td>
		</tr>
		<tr>
			<td>重复密码</td>
			<td>
				<input type="password" name="repassword" id="repassword"/>
				<span id="repasswordMsg"></span>
				<span id="equalsP"></span>
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" value="注册" onclick="return checkForm()"/>
			</td>
		</tr>
	</table>
</form>

JavaScript代码

<script type="text/javascript">
	function checkForm(){
		//校验前要清空span的内容体
		//注意此处获取的是内容体而不是值
		var u_msg = document.getElementById("usernameMsg");
		u_msg.innerHTML = "";
		var p_msg = document.getElementById("passwordMsg");
		p_msg.innerHTML = "";
		var rep_msg = document.getElementById("repasswordMsg");
		rep_msg.innerHTML = "";
		//用户名不能为空
		var f1 = checkIsNotNull("username","用户名");
		//密码不能为空
		var f2 = checkIsNotNull("password","密码");
		//确认密码不能为空
		var f3 = checkIsNotNull("repassword","确认密码");
		//密码和确认密码要保持一致
		if(f2 && f3){
			var p_val = document.getElementById("password").value;
			var rep_val = document.getElementById("repassword").value;
			if(p_val!=rep_val){
				var msg = document.getElementById("equalsP");
				msg.innerHTML = "<font color='red'>两次密码必须一致</font>"
				return false;
			}
		}
		return f1 && f2 && f3;
	}
	//获取对象的标签体内容，先要获取对象，根据id获取对象，所以要传入个id
	//传入的msg表示提示内容，如用户名不能为空  msg即为用户名
	function checkIsNotNull(id,msg){
		var ver = /^\s*$/;//校验是否为空
		var u_val = document.getElementById(id).value;
		var m_val = document.getElementById(id+"Msg");
		if(ver.test(u_val)){
			m_val.innerHTML = "<font color='red'>"+msg+"不能为空</font>";
			return false;
		}
		return true;
	}
</script>

表单提交问题

涉及到submit事件 submit事件要求又有返回值 关键字 return，在上边四行代码中2、4是正确的
submit事件 当返回true的时候才会提交 否则不提交