前端简单入门第十一讲 使用JavaScript完成注册页面表单提示及校验

使用JavaScript完成注册页面表单提示及校验

还记得我之前写过的前端简单入门第七讲 使用JavaScript完成表单简单的数据校验验一文吗？很明显这种以弹出对话框的形式进行表单校验的方式不是特别友好！更好地做法是可以将错误信息显示到文本框的后面，而且当光标落入到文本框的时候，会有提示的信息。
如要使用JavaScript完成注册页面表单提示及校验，不可避免地要知道一些JavaScript中的常用事件，例如：

• onfocus：元素获得焦点；
• onblur：元素失去焦点；
• onkeyup事件：键盘按键抬起事件；
• onsubmit：表单提交的时候提交按钮被点击。

了解上述知识点之后，下面我就按如下步骤来使用JavaScript完成注册页面表单提示及校验：

1. 创建一个【简单的页面校验.html】的html文档；
2. 在要去校验的文本框上添加事件；
3. 触发函数；
4. 在函数中向文本框后的html的区域中写入一段提示的内容。

首先我从自己编写的注册页面中抽出核心代码如下：

<form action="../index.html" onsubmit="return checkForm()">
	用户名：<input type="text" id="username" onfocus="showTips('span_username', '用户名长度不能小于6位！')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
	密码：<input type="password" id="password" onfocus="showTips('span_password', '密码长度不能小于6位！')" onblur="checkPassword()" onkeyup="checkPassword()" /><span id="span_password"></span><br />
	确认密码：<input type="password" id="repassword" onfocus="showTips('span_repassword', '两次密码必须一致！')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
	邮箱：<input type="text" id="email" onfocus="showTips('span_email', '邮箱格式必须正确！')" onblur="checkMail()" /><span id="span_email"></span><br />
	手机号：<input type="text" id="tel" /><br />
	<input type="submit" value="提交" />
</form>

接着就要编写JavaScript代码完成注册页面表单提示及校验：

<script>
	/*
	 * 1.确定事件：onfocus
	 * 2.事件要驱动函数
	 * 3.函数要干一些事情，修改span的内容
	 */
	function showTips(spanID, msg) {
		//首先要获得操作的span元素
		var span = document.getElementById(spanID);
		span.innerHTML = msg;
	}
	
	/*
	 * 校验用户名
	 * 1.确定onblur事件，失去焦点的事件
	 * 2.checkUsername()函数
	 * 3.在函数里面去校验，函数去显示校验结果
	 */
	function checkUsername() {
		//获取用户输入的内容
		var uValue = document.getElementById("username").value;
		//对输入的内容进行校验
		//获得要显示结果的span
		var span = document.getElementById("span_username");
		
		if (uValue.length < 6) {
			//显示校验结果
			span.innerHTML = "<font color='red' size='2'>对不起，太短</font>";
			return false;
		} else {
			span.innerHTML = "<font color='red' size='2'>恭喜您，可用</font>";
			return true;
		}
	}
	
	/*
	 * 密码校验
	 * 
	 */
	function checkPassword() {
		//获取密码输入
		var uPass = document.getElementById("password").value;
		
		var span = document.getElementById("span_password");
		
		//对密码输入进行校验
		if (uPass.length < 6) {
			span.innerHTML = "<font color='red' size='2'>对不起，太短</font>";
			return false;
		} else{
			span.innerHTML = "<font color='red' size='2'>恭喜您，够用</font>";
			return true;
		}
	}
	
	/*
	 * 确认密码校验
	 */
	function checkRePassword() {
		//获取密码输入
		var uPass = document.getElementById("password").value;
		
		//获取确认密码输入
		var uRePass = document.getElementById("repassword").value;
		
		var span = document.getElementById("span_repassword");
		
		//对密码输入进行校验
		if (uPass != uRePass) {
			span.innerHTML = "<font color='red' size='2'>对不起，两次密码不一致</font>";
			return false;
		} else{
			span.innerHTML = "";
			return true;
		}
	}
	
	/*
	 * 校验邮箱
	 */
	function checkMail() {
		var uMail = document.getElementById("email").value;
		var flag = checkEmail(uMail);
		var span = document.getElementById("span_email");
//		alert(123);
		//对邮箱进行校验
		if (flag) {
			span.innerHTML = "<font color='red' size='2'>恭喜您，可用</font>";
			return true;
		} else{
			span.innerHTML = "<font color='red' size='2'>对不起，邮箱格式貌似有问题</font>";
			return false;
		}
	}
	
	function checkForm() {
		var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
		
		return flag;
	}
</script>

其中，校验邮箱的checkEmail()函数引用自外部的regutils.js文件，如下：

我也只是稍微判断了一下用户名、密码、确认密码以及邮箱输入框，给大家抛砖引玉，大家可仿照上面的代码对需要校验的输入框进行细腻的判断，在此并不赘述。
这样，在Chrome浏览器上运行【简单的页面校验.html】页面，效果如下：

总结

JavaScript事件可参考JavaScript的事件(Events)对象，如下：

以下事件比较常用：

• onload：某个页面或图像被完成加载
• onclick：鼠标点击某个对象
• onsubmit：提交按钮被点击
• onfocus：元素获得焦点
• onblur：元素失去焦点
• onchange：用户改变域的内容，还有下拉列表框改变之后也可触发该事件
• ondblclick：鼠标双击某个对象
• 键盘操作事件
  • onkeydown：某个键盘的键被按下
  • onkeyup：某个键盘的键被松开
  • onkeypress：某个键盘的键被按下或按住
• 鼠标操作事件
  • onmousemove：鼠标被移动
  • onmouseout：鼠标从某元素移开
  • onmouseover：鼠标被移到某元素之上
  • onmousedown：某个鼠标按键被按下
  • onmouseup：某个鼠标按键被松开