JavaWeb03-HTML篇笔记(四)
原创
我是小谷粒2018-05-03 16:00:24©著作权
文章标签
Java
阅读数
230
©著作权归作者所有:来自51CTO博客作者我是小谷粒的原创作品,如需转载,请注明出处,否则将追究法律责任
https://blog.51cto.com/u_13517854/2112196
1.1 使用JS完成注册页面表单提示及校验1.1.1 需求:
![](https://s4.51cto.com/images/blog/201805/03/90e53e677f332e0e4622fbb6897f23dc.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
注册页面之前是弹出对话框的形式进行校验的这种方式不是特别友好!可以将错误信息显示到文本框的后面.而且当光标落入到文本框的时候,提示的信息.
1.1.2 分析:1.1.2.1 技术分析:
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
1.1.2.2 步骤分析:
【步骤一】创建一个html文档
【步骤二】在要去校验的文本框上添加事件.
【步骤三】触发函数
【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.
1.1.3 代码实现:
```
function tips(id,content){
document.getElementById(id+"Span").innerHTML = ""+content+"";
}
function checkForm(){
// 判断用户名不能为空:
var username = document.getElementById("username").value;
if(username == ""){
document.getElementById("usernameSpan").innerHTML = "用户名不能为空!";
return false;
}
var password = document.getElementById("password").value;
if(password == ""){
document.getElementById("passwordSpan").innerHTML = "密码不能为空!";
return false;
}
}
1.1.4 总结:1.1.4.1 JS的事件的总结:
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown :
* onkeyup :
* onkeypress:
鼠标操作事件:
* onmousemove:
* onmouseout:
* onmouseover:
* onmousedown
* onmouseup
```
赞
收藏
评论