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

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

功能要求：

  1. 用户名不能为空
  2. 用户名必须在6-14位之间
  3. 用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
  4. 密码和确认密码一致，邮箱地址合法
  5. 统一是去焦点验证
  6. 错误提示信息统一在span标签中提示，并且要求字体12号、红色
  7. 文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
  8. 最终表单中所有项均合法方可提交

以下为整体代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>注册表单验证</title>
    <style type="text/css">
      caption {
	font-size:1.125rem;
	font-weight:600;
	margin-bottom:0.3125rem;
      }
      td {
	text-align:right;
      }
      span {
	font-size:0.75rem;
	color:red;
      }
      .none {
	border:0rem;
      }
    </style>
    <script type="text/javascript">
      /* 
      1、用户名不能为空
      2、用户名必须在6-14位之间
      3、用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
      4、密码和确认密码一致，邮箱地址合法
      5、统一是去焦点验证
      6、错误提示信息统一在span标签中提示，并且要求字体12号、红色
      7、文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
      8、最终表单中所有项均合法方可提交
       */

      // 页面加载完成后执行以下函数
      window.onload = function() {
        // 获取用户名输入框
        var username = document.getElementById("username");
        // 获取用户名提示信息的span标签
        var usernameHint = document.getElementById("usernameHint");
        // 定义用户名仅能由数字和字母组成的正则表达式
        var UserRegExp = /^[a-zA-Z0-9]+$/;
        // 获取密码输入框
        var password1 = document.getElementById("password1");
        // 获取确认密码输入框
        var password2 = document.getElementById("password2");
        // 获取密码提示信息的span标签
        var password1Hint = document.getElementById("password1Hint");
        // 获取确认密码提示信息的span标签
        var password2Hint = document.getElementById("password2Hint");
        // 获取邮箱输入框
        var mailbox = document.getElementById("mailbox");
        // 获取邮箱提示信息的span标签
        var mailboxHint = document.getElementById("mailboxHint");
        // 定义邮箱地址合法的正则表达式
        var mailRegExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        // 获取submit按钮
        var mySubmit = document.getElementById("mySubmit");
        // 获取form表单
        var myForm = document.getElementById("myForm");
        // 用户名输入框失去焦点时执行以下函数
        username.onblur = function() {
          // 如果用户名为空进行提示
          if (username.value == "") {
            usernameHint.innerHTML = "用户名不能为空";
            // 如果用户名长度不符合要求进行提示
          } else if (username.value.length < 6 || username.value.length > 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();
          }
        }
      }
    </script>
  </head>
  <body>
    <form action="https://127.0.0.1:8080/xqb/register" method="get" id="myForm">
      <table align="center" border="1px,solid,black" cellspacing="3" cellpadding="8">
        <caption>用户注册</caption>
        <tr class="none">
          <td>用户名：</td>
          <td>
            <span id="usernameHint"></span>
            <input type="text" id="username" name="username" /></td>
        </tr>
        <tr class="none">
          <td>密码：</td>
          <td>
            <span id="password1Hint"></span>
            <input type="text" id="password1" name="password1" /></td>
        </tr>
        <tr class="none">
          <td>确认密码：</td>
          <td>
            <span id="password2Hint"></span>
            <input type="text" id="password2" /></td>
        </tr>
        <tr class="none">
          <td>邮箱：</td>
          <td>
            <span id="mailboxHint"></span>
            <input type="text" id="mailbox" name="mailbox" /></td>
        </tr>
        <!-- 在表单提交后只有表单元素的 name 属性才会传递数据值 -->
        <tr class="none">
          <td colspan="2" style="text-align: center;">
            <input type="button" value="注册" id="mySubmit" />&emsp;&emsp;
            <input type="reset" id="reset" /></td></tr>
      </table>
    </form>
  </body>
</html>

效果图如下：

posted @ 2020-12-20 15:33 Schieber 阅读(399) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

Schieber

欢迎来到郗庆波的博客

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

功能要求：

以下为整体代码：

效果图如下：

公告