使用JavaScript完成注册页面表单提示及校验
还记得我之前写过的前端简单入门第七讲 使用JavaScript完成表单简单的数据校验验一文吗?很明显这种以弹出对话框的形式进行表单校验的方式不是特别友好!更好地做法是可以将错误信息显示到文本框的后面,而且当光标落入到文本框的时候,会有提示的信息。
如要使用JavaScript完成注册页面表单提示及校验,不可避免地要知道一些JavaScript中的常用事件,例如:
- onfocus:元素获得焦点;
- onblur:元素失去焦点;
- onkeyup事件:键盘按键抬起事件;
- onsubmit:表单提交的时候提交按钮被点击。
了解上述知识点之后,下面我就按如下步骤来使用JavaScript完成注册页面表单提示及校验:
- 创建一个【简单的页面校验.html】的html文档;
- 在要去校验的文本框上添加事件;
- 触发函数;
- 在函数中向文本框后的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:某个鼠标按键被松开