Question

我有这个HTML和PHP代码：

    <?php
require_once("include/membersite_config.php");
if(isset($_POST['submitted']))
{
if($fgmembersite->Login())
{
$fgmembersite->RedirectToURL("login-home.php");
}
}
?>

<form id='login'  action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<div style="position: absolute; top: 15px; right: 120px;">
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
<span id='login_username_errorloc' class='error'></span>
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>
</div>
<input type='submit' style='position: absolute; top: 18px; right: 45px;' name='Submit' value='Submit' />
<!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
<div><span class='error'><?php echo $fgmembersite->GetErrorMessage(); ?></span></div>
</form>

如果用户名和/或密码框为空，则会显示一条消息，通知用户。如果空框在用户点击提交后空，则如何将空框更改为红色？

Answer 1

使用Javascript在客户端上执行此操作。

<script>
window.onload = function() {
    function validate(e) {
        var username = document.getElementById('username');
        if (username.value.trim() == '') {
            username.style.backgroundColor = 'red';
            e.preventDefault();
        } else {
            username.style.backgroundColor = null;
        }
        var password = document.getElementById('password');
        if (password.value.trim() == '') {
            password.style.backgroundColor = 'red';
            e.preventDefault();
        }else {
            password.style.backgroundColor = null;
        }
    }
    document.getElementById('login').addEventListener('submit', validate);
}
</script>

e.preventDefault()会阻止表单在发生其中一个验证错误时提交。

如果不正确则更改复选框颜色

1 个答案: