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

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了简易版用户注册表单验证功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

以下代码使用原生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>
效果图如下:

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

总结


以上是前端之家为你收集整理的简易版用户注册表单验证功能全部内容,希望文章能够帮你解决简易版用户注册表单验证功能所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。