Question

我正在处理表单名称。它包含1个电子邮件字段，其他1个是密码。这些字段位于我在css中创建的div中。我想要的是分别在电子邮件字段和密码字段下方显示警报，如果其中任何一个留空。

Answer 1

在文本框下方再添加一个div

<div>
    <input type="text" />
</div>
<div id="alertName">
</div>
<div>
    <input type="password" />
</div>
<div id="alertPwd">
</div>

Answer 2

如果您使用的是jquery，则可以使用jquery-validate插件。要么如果您使用的是HTML 5，则验证空字段需要属性。喜欢下面

<form action="demo_form.asp">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

链接：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required

Answer 3

这是一个小小的工作示例：您可以看到表示该字段为空的经典星号。此外，javascript函数将在输入的每次更改时运行，充当动态函数。

function checkEmptyEmail() {
        var email = document.getElementById('email').value;
        if (email != '') {
            document.getElementById('emailReq').style.display = 'none';
        }
        else {
            document.getElementById('emailReq').style.display = 'inline-block';
        }
    }

function checkEmptyPasswd() {
        var passwd = document.getElementById('passwd').value;
        if (passwd != '') {
            document.getElementById('passwdReq').style.display = 'none';
        }
        else {
            document.getElementById('passwdReq').style.display = 'inline-block';
        }
    }

.validation-asterisk-visible {
    padding-left: 8px;
    font-weight: bold;
    font-size: 13px;
    color: Red;
}

Email:       <input type="text" id="email" name="email"  onchange="checkEmptyEmail()" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
<label id="emailReq" class="validation-asterisk-visible">*</label>
    <p>
Password: <input type="password" id="passwd" name="passwd"  onchange="checkEmptyPasswd()" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">
<label id="passwdReq" class="validation-asterisk-visible">*</label>

在测试字段下方显示警报

3 个答案: