本文共 1066 字，大约阅读时间需要 3 分钟。

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

还记得我之前写过的一文吗？很明显这种以弹出对话框的形式进行表单校验的方式不是特别友好！更好地做法是可以将错误信息显示到文本框的后面，而且当光标落入到文本框的时候，会有提示的信息。

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

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

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

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

   
    	用户名：
    
    
    
	密码：
    
    
    
	确认密码：
    
    
    
	邮箱：
    
    
    
	手机号：
    
    
	
    
   

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

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

总结

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

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

转载地址：https://liayun.blog.csdn.net/article/details/71142149 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！