JS 登记表答案

【问题标题】：JS Registration FormJS 登记表
【发布时间】：2014-11-18 04:30:28
【问题描述】：

我正在创建一个带有姓名、电子邮件和电话号码的注册表单。我有一个姓名 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 开发和设计。

我不确定我应该如何让 txterrors 工作，然后我在 html 中有一个 style.visibility，我可以设置 if 和 else 语句，如果它是真的，我可以让它隐藏或可见或如果虚假隐藏或可见。我不确定如何执行此操作，尽管我确实阅读了 addErrorMessage() 和 removeErrorMessage() 函数，我将添加 id 和错误消息，但我不确定这意味着什么，因为在我提供的 html 文件中错误消息在 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;
}

【问题讨论】：

提示w3resource
这是一个很好的提示，但它使用了 alert() 函数。不过还是谢谢。

标签： javascript html registration

【解决方案1】：

你在一个地方使用

var txtPhone = U.$('phone');

在其他方面

var txtNameError = document.getElementById('txtNameError');

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

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

var txtPhone = document.getElementById('txtPhone');

这段代码也很奇怪：

如果 (/^[A-Z .-']{2,20}$/i.test(txtName.value.length > 6))

对于检查长度，您应该单独检查或更改正则表达式。

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

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

p.error {display:none;}
为了显示错误，你应该让错误信息可见

如果 (/^[A-Z .-']{7,20}$/i.test(txtName.value)) { //值是正确的。如果需要，做一些 } 别的 { //值错误 //显示元素txtNameError }

【讨论】：