Javascript知识【案例：注册表单校验】

案例：完善注册表单校验【重点】

注册校验通过警告框来提示信息，这使得信息的提示很不友好。

所以我们对信息的提示进行改进，使错误信息的提示以图示方式进行展示。

html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>title>
      <style type="text/css">
         body{
            height:500px;
         }
         #divFormId{
            border: 5px solid #999;
            width: 550px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
         }
         #divbg{
            background: url(img/regist_bg.jpg);
            height:100%;
            padding-top: 80px;
         }
         td{
            padding-top: 10px;

         }
         .errorMsg{
            color:red;
            font-size: 12px;
         }
      style>
      <script>
         var reg = /^\s*$/;
         //校验表单提交数据
         function checkFormData() {
            //设置一个开关：开关为true 提交表单，开关为false，阻止表单提交
            var result = true;
            //每次检查之前，先将错误信息全部清空
            var usernameSpan = document.getElementById("usernameSpan");
            var pwdSpan = document.getElementById("pwdSpan");
            var repwdSpan = document.getElementById("repwdSpan");
            usernameSpan.innerHTML="";
            pwdSpan.innerHTML="";
            repwdSpan.innerHTML="";

            //1、获取用户名、密码、确认密码框体的值
            var usernameVal = document.getElementById("username").value;
            var pwdVal = document.getElementById("pwd").value;
            var repwdVal = document.getElementById("repwd").value;
            //2、先依次判断用户名、密码、确认密码的不能为空校验，如果有空，直接弹出错误信息，阻止表单提交
            if(reg.test(usernameVal)){
               usernameSpan.innerHTML = "不能为空";
               result = false;
            }
            if(reg.test(pwdVal)){
               pwdSpan.innerHTML = "不能为空";
               result = false;
            }
            if(reg.test(repwdVal)){
               repwdSpan.innerHTML = "不能为空";
               result = false;
            }
            //3、若都不为空，再进行密码和确认密码是否相等的判断，如果都不相等，直接弹出错误信息，阻止表单提交
            if(pwdVal!=repwdVal){
               repwdSpan.innerHTML = "须和密码一致";
               result = false;
            }

            //4、若都不为空，密码和确认密码是相等的，正常提交表单
            return result;
         }
      script>
   head>

   <body>
      <div id="divbg">
         <div id="divFormId">
            <form action="#" method="get" onsubmit="return checkFormData()">
               <table width="550">
                  <tr>
                     <td colspan="3">
                        <font color="#3164af" size="5">会员注册font> USER REGISTER
                     td>
                  tr>
                  <tr>
                     <td align="right">用户名td>
                     <td colspan="2"><input type="text" id="username" name="username" size="50"/><span id="usernameSpan" class="errorMsg">span>td>
                  tr>
                  <tr>
                     <td align="right">密码td>
                     <td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/><span id="pwdSpan" class="errorMsg">span>td>
                  tr>
                  <tr>
                     <td align="right">确认密码td>
                     <td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/><span id="repwdSpan" class="errorMsg">span>td>
                  tr>
                  <tr>
                     <td align="right">Emailtd>
                     <td colspan="2"><input type="text" id="email" name="email" size="50"/> td>
                  tr>
                  <tr>
                     <td align="right">姓名td>
                     <td colspan="2"><input name="text" id="name" name="name" size="50"/> td>
                  tr>
                  <tr>
                     <td align="right">性别td>
                     <td colspan="2">
                        <input type="radio" name="sex" value="man" checked="checked" />男
                        <input type="radio" name="sex" value="woman" />女
                     td>
                  tr>
                  <tr>
                     <td align="right">出生日期td>
                     <td colspan="2"><input type="text" id="birthday" name="birthday" size="50"/> td>
                  tr>
                  <tr>
                     <td width="80" align="right">验证码td>
                     <td width="100"><input type="text" id="verifyCode" name="verifyCode" /> td>
                     <td><img src="img/verifyCode.jpg" /> td>
                  tr>
                  <tr>
                     <td>td>
                     <td colspan="2">
                        <input type="image" src="img/submit.jpg" />
                     td>
                  tr>
               table>

            form>
         div>
      div>
   body>
html>

相关阅读:
bare Git 仓库是什么？
二.831(KMP)字符串详解
软件测试项目职责与分工、测试流程
Mybatis-Plus3.x的使用
Hexagon_V65_Programmers_Reference_Manual（42）
MybatisPlus01
JavaEE——Tomcat和servlet
【JAVA基础】JDK8 HashMap 源码深度解析
日入过万的粗暴玩法
Linux入门攻坚——3、基础命令学习-文件管理、别名、glob、重定向、管道、用户及组管理、权限管理

原文地址：https://blog.csdn.net/m0_64550837/article/details/126213356