JavaWeb03-HTML篇笔记

Posted 2020-11-02

1.1 使用JS完成注册页面表单提示及校验1.1.1 需求：

注册页面之前是弹出对话框的形式进行校验的这种方式不是特别友好！可以将错误信息显示到文本框的后面.而且当光标落入到文本框的时候,提示的信息.
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 = "<font color=‘red‘>"+content+"</font>";
                      }
  
                      function checkForm(){
                              // 判断用户名不能为空:
                              var username = document.getElementById("username").value;
                              if(username == ""){
                                      document.getElementById("usernameSpan").innerHTML = "<font color=‘red‘>用户名不能为空！</font>";
                                      return false;
                              }
  
                              var password = document.getElementById("password").value;
                              if(password == ""){
                                      document.getElementById("passwordSpan").innerHTML = "<font color=‘red‘>密码不能为空！</font>";
                                      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