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>

相关阅读:
用winsw将nodejs项目的exe程序安装为服务
数字图像处理实验记录四（图像的空间域增强-平滑处理）
JS逆向 Frida - 夜神模拟器安装配置基本使用
Linux【安全 02】OpenSSH漏洞修复（离线升级最新版本流程）网盘分享3个安装包+26个离线依赖
科技云报道：混合办公的B面：安全与效率如何兼得？
如何下载安装RabbitMQ
联发科最先完成WiFi 7演示，速度是WiFi 6的2.4倍
flex 收缩计算、简写
抽象 I/O设备模型
Python基础之数据库：5、创建表的完整语法、MySQL数据类型

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