HTML、CSS、JavaScript实现简易版用户注册表单验证功能

以下代码使用原生HTML、CSS、JS编写完成，可以直接在浏览器中解析运行查看效果，由于代码只完成了简单的验证功能，所以仅作为练手与参考的作用。

功能要求：
  1. 用户名不能为空
  2. 用户名必须在6-14位之间
  3. 用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
  4. 密码和确认密码一致，邮箱地址合法
  5. 统一是去焦点验证
  6. 错误提示信息统一在span标签中提示，并且要求字体12号、红色
  7. 文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
  8. 最终表单中所有项均合法方可提交
以下为整体代码：
注册表单验证 14) {
            usernameHint.innerHTML = "用户名必须在6-14位之间";
            // 如果用户名不符合正则表达式要求进行提示
          } else {
            var result = UserRegExp.test(username.value);
            if (result != true) {
              usernameHint.innerHTML = "用户名只能由数字和字母组成";
            }
          }
        }
        // 用户名输入框获得焦点时清空提示信息
        username.onfocus = function() {
          // 如果用户名存在提示信息就清空输入框中的值
          if (usernameHint.innerHTML != "") {
            username.value = "";
          }
          usernameHint.innerHTML = "";
        }
        // 密码输入框是去焦点时进行为空判断
        password1.onblur = function() {
          if (password1.value == "") {
            password1Hint.innerHTML = "密码不能为空";
          }
        }
        // 密码输入框获得焦点时清空提示信息
        password1.onfocus = function() {
          password1Hint.innerHTML = "";
        }
        // 确认密码输入框失去焦点时判断两次密码是否一致
        password2.onblur = function() {
          if (password2.value != password1.value) {
            password2Hint.innerHTML = "密码和确认密码不一致";
          }
        }
        // 确认密码获得焦点时清空提示信息
        password2.onfocus = function() {
          password2Hint.innerHTML = "";
        }
        // 邮箱输入框是去焦点时检验邮箱输入是否合法
        mailbox.onblur = function() {
          var result = mailRegExp.test(mailbox.value);
          if (!result) {
            mailboxHint.innerHTML = "邮箱地址不合法";
          }
        }
        // 邮箱输入框获得焦点时清空提示信息
        mailbox.onfocus = function() {
          if (mailboxHint.innerHTML != "") {
            mailbox.value = "";
          }
          mailboxHint.innerHTML = "";
        }
        // 点击"注册"按钮时执行以下函数：判断用户数据是否填写/填写完整后才可以提交
        mySubmit.onclick = function() {
          // 只要输入框中有一个值为空，就需要去执行各"focus"和"blur"函数一次
          /* 不可以使用&&，否则只有当所有值都为空时才会执行"focus"、"blur"函数，
					   只要有一个值不为空，就会返回false跳出判断 */
          if (username.value == "" || password1.value == "" || password2.value == "" || mailbox.value == "") {
            username.focus();
            username.blur();

            password1.focus();
            password1.blur();

            password2.focus();
            password2.blur();

            mailbox.focus();
            mailbox.blur();
          } else {
            // 使用form表单的submit函数用户提交填写的数据
            myForm.submit();
          }
        }
      }" _ue_custom_node_="true">用户注册用户名：
            密码：
            确认密码：
            邮箱：
              
效果图如下：

简易版用户注册表单验证功能_注册表单验证