具有多种功能的表格

Question

我正在尝试为HTML 5中的表单创建一个javascript，我在字段中添加文本，然后接收任何带有onfocus，onblur函数的输入，带有带onmouseover函数的问号的div以显示带有消息的另一个div另外一个检查表单中输入的函数是空的，或者不遵循正则表达式。但是我不能把它放在实践中，有人可以告诉我在哪里坠落：

检查输入

function checkForm() {

    document.getElementById("button").onclick = function() {
    var allowsubmit = true; 
    var nameRegEx = /[a-zA-Z]/;
    var hNumberRegEx = /[A-Z0-9{7}]/;
    var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
    var fName = document.getElementById("first").value;
    var lName = document.getElementById("last").value;
    var hNumber = document.getElementyId("hnumber").value;
    var email = document.getElementById("emailaddress");
    //email
    if ((email === "") ||(!emailRegEx.test(email.value))) {
        errorMessage(erroremail);
        return false;
        }
    //first name
    if ((fName === "") || (!nameRegEx.test(fName))){
        errorMessage(errorfname);
        return false;
        }
    //last name
    if ((lName === "") || (!nameRegEx.test(lName))){
        errorMessage(errorlname);
        return false;
        }
    //health authority number
    if ((hNumber === "") || (!hNumberRegEx.test(hNumber))){
        errorMessage(errorhnumber);
        return false;
        }
    else {
        return true;
    }
}

错误消息

function errorMessage(id) {

    document.getElementById(id).style.display="inline";
}

工具提示

function switchToolTip() {  

      document.getElementById('qmark').onmouseover = function() {
      var toolTip = document.getElementById('ttip');
      toolTip.style.display='block';
      } 
      document.getElementById('qmark').onmouseout = function() {
      var toolTip = document.getElementById('ttip');
      toolTip.style.display='none';
      }     
    }

字段中的文字

function textFields() { 

     var fName = "Enter First Name.";
     var lName = "Enter Last Name.";
     var heathAutNumber = "Enter ZHA Number.";
     //first name
     var txtFName = document.getElementById("first");
     txtFName.value = fName;
     txtFName.style.color = "#A8A8A8";
     txtFName.style.fontStyle = "italic";

     txtFName.onfocus = function() {
      if (this.value === fName) {
        this.value = "";
        this.style.color = "#000";
        this.style.fontStyle = "normal";
      }
     }
     txtFName.onblur = function() {
      if (this.value === "") {
        this.value = fName;
        this.style.color = "#A8A8A8";
        this.style.fontStyle = "italic";
      }
     }
     //last name
     var txtLName = document.getElementById("last");
     txtLName.value = lName;
     txtLName.style.color = "#A8A8A8";
     txtLName.style.fontStyle = "italic";

     txtLName.onfocus = function() {
      if (this.value === lName) {
        this.value = "";
        this.style.color = "#000";
        this.style.fontStyle = "normal";
      }
     }

     txtLName.onblur = function() {
      if (this.value === "") {
        this.value = lName;
        this.style.color = "#A8A8A8";
        this.style.fontStyle = "italic";
      }
     }
     //health authority number
     var txtHANumber = document.getElementById("hnumber");
     txtHANumber.value = healthAutNumber;
     txtHANumber.style.color = "#A8A8A8";
     txtHANumber.style.fontStyle = "italic";

     txtHANumber.onfocus = function() {
      if (this.value === healthAutNumber) {
        this.value = "";
        this.style.color = "#000";
        this.style.fontStyle = "normal";
      }
     }
     txtHANumber.onblur = function() {
      if (this.value === "") {
        this.value = healthAutNumber;
        this.style.color = "#A8A8A8";
        this.style.fontStyle = "italic";
      }
     }
    }

window.onload //我仍然不太清楚如何做这个部分所以所有的功能都可以工作

window.onload=textFields;