JS Registration Form

JS Registration Form

本文关键字：Form Registration JS      更新时间：2023-09-26

我正在创建一个带有姓名、电子邮件和电话号码的注册表。我有一个名称 id、电话 ID 和电子邮件 ID，我也有 txtNameError、txtPhoneError 和 txtEmailError，并且我使用的是 bnt 按钮 ID。

这是程序的 HTML。

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Week 12: Registration Form</title>
    </head>
    <body>
    <div class="page">
    <table>
        <tr>
            <td><input type="text" name="txtName" id="txtName" placeholder="Name" /></td>
            <td><p class="error" id="txtNameError">Name must be at least 6 characters long.</p>
 </td>
        </tr>
        <tr>
            <td><input type="text" name="txtPhone" id="txtPhone" placeholder="Phone: ###-###-
 ####" /></td>
            <td><p class="error" id="txtPhoneError">Phone must be in the format ###-###-####.</p>
 </td>
        </tr>
        <tr>
            <td><input type="text" name="txtEmail" id="txtEmail" placeholder="Email Address" />
 </td>
            <td><p class="error" id="txtEmailError">Must be a valid email address.</p></td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;"><button id="btnRegister" 
 name="btnRegister">Register</button></td>
        </tr>
    </table>
    </div>
    <link type="text/css" rel="stylesheet" href="week12.css" />
    <script type="text/javascript" src="week12.js"></script>
    </body>
    </html>

和我的JavaScript：

    var txtEmail = document.getElementById('txtEmail');
    var txtPhone = document.getElementById('txtPhone');
    var txtName = document.getElementById('txtName');
    var txtEmailError = document.getElementById('txtEmailError');
    var txtPhoneError = document.getElementById('txtPhoneError');
    var txtNameError = document.getElementById('txtNameError');


    function register(){
    if (/^[A-Z '.'-']{6,20}$/i.test(txtName.value)) {
    p.error {display:none;}
    } else {
    p.error {display:txtNameError;}
    }
    if (/'d{3}[ '-'.]?'d{3}[ '-'.]?'d{4}/.test(txtPhone.value)) {
    p.error {display:none;}
    } else {
    p.error {display:txtPhoneError;}
    }
    if (/^['w.-]+@['w.-]+'.[A-Za-z]{2,99}$/.test(txtEmail.value)) {
    p.error {display:none;}
    } else {
    p.error {display:txtEmailError;}
    }
    }
    {
    var btnRegister = document.getElementById('btnRegister');
    btnRegister.onclick = register;
    }

我正在使用由larry ullman编写的Modern JavaScript开发和设计。

我

不确定在我有一个 style.visibility 之前，我应该如何让 txterrors 在 html 中工作，我可以设置 if 和 else 语句，如果它是真的，我可以让它隐藏或 vis 或者如果假隐藏或 vis。我不确定如何做到这一点，尽管我确实阅读了有关addErrorMessage（）和removeErrorMessage（）函数的信息，我会添加id和错误消息，但我不确定这意味着什么，因为在html文件中提供了错误msg在html文件中。感谢您的任何提示。

.CSS

body {
margin: 0;
}
.page {
margin: 10px auto;
height: 500px;
width: 500px;
background: #CCC;
}
.page table {
    width: 500px;
    height: 500px;
}
.error {
color: #FF0000;
font-weight: bold;
font-style: italic;
visibility: hidden;
}
  1. 您可以在一个地方使用

var txtPhone = U.$（'phone'）;

和其他

var txtNameError = document.getElementById（'txtNameError'）;

我认为这是复制和粘贴，你不明白它是如何工作的。在您的 html 中不存在名称或 ID 为"电话"的字段。

首先，您应该使用一种方法来访问 HTML 元素。

var txtPhone = document.getElementById('txtPhone');
  1. 这段代码也很奇怪：
if （/

^[A-Z .-']{2，20}$/i.test（txtName.value.length> 6））

对于检查长度，您应该将其分开检查或更改正则表达式。

if (/^[A-Z '.'-']{7,20}$/i.test(txtName.value))

  1. 对于隐藏的错误文本，您可以使用 CSS。例如

    p.error {display：none;}

  2. 对于显示错误，您应该使错误消息可见

    if （/

    ^[A-Z .-']{7，20}$/i.test（txtName.value）） { 值正确。如果需要，可以制作一些} else { 值是错误的 显示元素 txtNameError}

相关文章：