Question

我正在创建一个名称为电子邮件和电话号码的注册表单。我有一个名称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编写的现代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;
}

Answer 1

您在一个地方使用

var txtPhone = U。$（＆＃39; phone＆＃39;）;

和其他

var txtNameError = document.getElementById（＆＃39; txtNameError＆＃39;）;

我认为这是复制和粘贴，你不明白它是如何工作的。并且在您的html中不存在具有名称或ID的字段＆＃34; phone＆＃34;。

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

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

这段代码也很奇怪：

if（/ ^ [A-Z .-＆＃39;] {2,20} $ / i.test（txtName.value.length＆gt; 6））

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

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

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

p.error {display：none;}
对于显示错误，您应该显示错误消息

if（/ ^ [A-Z .-＆＃39;] {7,20} $ / i.test（txtName.value））{ //值是正确的。如果需要，做一些 } else { //值是错的 // show element txtNameError }

JS登记表

1 个答案: