0

我有一个简单的登录页面，但遇到了一些麻烦。当您输入不正确的信息时，它只会发出警报，但我希望它在使它们变为红色的字段的背景中添加一些 CSS。我将如何编辑以下代码来做到这一点？

这是小提琴。

谢谢。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Jeremy Blaz&eacute;</title>
</head>
<body>
    <div id="box">
        <img src="logo.png" />
        <form name="login">
            <input type="text" name="userid" placeholder="Username" />
            <input type="password" name="pswrd" placeholder="Password" />
            <input type="submit" class="button" onclick="check(this.form)" placeholder="Password" value="Sign in" />
        </form>
    </div>
    <script language="javascript">
    function check(form) {
        if(form.userid.value == "username" && form.pswrd.value == "password") {
            window.open('dashboard/index.html')
        }
        else {
            alert("Error Password or Username")
        }
    }
    </script>
</body>
</html>
4

3 回答 3

0

我会稍微改变你的功能并在表单上运行它onsubmit：

function check(form) {

    var valid = true;

    if (form.userid.value !== 'username') {
        form.userid.className = 'error';
        valid = false;
    }
    else {
        form.userid.className = '';
    }

    if (form.pswrd.value !== 'password') {
        form.pswrd.className = 'error';
        valid = false;
    }
    else {
        form.pswrd.className = '';
    }

    if (valid) {
        window.open('dashboard/index.html');
    }

    return false; // return valid; if you want to submit the form once it's valid
}

HTML：

<form name="login" onsubmit="return check(this)">

CSS：

#box input.error {
    border: 1px darksalmon solid;
    background: #f0dddd;
}

演示：http: //jsfiddle.net/JLrQB/1/

于 2013-05-04T10:44:55.687 回答
0 
// js
else {
    alert("Error Password or Username");
    document.login.class = "error";
}

// css
form.error input[type="text"], form.error input[type="text"] {
    background-color: red;
}
于 2013-05-04T10:25:59.370 回答
0

出错时，您可以这样做：

form.userid.className = "invalid";

CSS

.invalid
{
    border-style:solid;
    border-width:2px;
    border-color:red;
}
于 2013-05-04T10:26:14.017 回答