html 密码输入错误时,如何使密码输入框的边框变为红色?

h7appiyu  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(159)

我正在做一个登录屏幕,当密码不正确时,我想让密码输入框变成红色。使用了Laravel中的HTML、CSS和PHP。当密码不正确时,它已经给出了一个错误。有人能帮忙吗?我不知道是否有必要,但这里是我的观点:

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
<style>
    body{
        background-color: #ccffcc;
        
        }

#container
{

    padding-top: 20px;
    width: 450px;
    height: 250px;
    margin-left: 650px;
    margin-right: auto;
    border: 15px solid #0d0d0d;
    padding: 50px;
    margin-top: 150px;
    background-color: white;

}

h5
{
    width: 450px;
    height: 200px;
    font-size: 50px;
    margin-left: 115px;
    padding-bottom: 0px;
    line-height: 0px;
    margin-top: -5px;
    font-family: Georgia;

}

.Button1
{
    width: 120px;
    height: auto;
    text-align: center;
    margin-top: -50px;
    position: absolute;
    top: 360px;
    left: 860px;

}

.Button2
{

    height: auto;
    font-size: 15px;
    text-align: center;
    margin-top: -50px;
    position: absolute;
    top: 515px;
    left: 1100px;

}
button
{
    height: 40px;
    width: 110px;
    font-size: 15px;
    background-color: #0066ff;
    font-family: Courier New monospace;
    color: white;
    border-radius: 8px;
    /*border: 1px solid red;*/
}

input
{
    font-size: 21px;
    position: absolute;
    left: -105px;
    width: 400px;
    border-radius: 8px;
    
}

.passw
{
    font-size: 21px;
    position: absolute;
    top: 280px;
    left: 758px;
    font-family: Cambria;

}

::placeholder 
{
    font-size: 15px;
}

button:hover {background-color:#0052cc;}

.error
{
    
    color: red;
    width: 300px;
    position: absolute;
    left: 800px;
    top: 452px;
    font-family: Cambria;
}

</style>

<div id="container">

    <h5>Login</h5>

</div>

<div class="error">
@if($errors->any())
  <h4>{{$errors->first()}}</h4>
@endif
</div>

    <div class="Button2">
        <form action="/auth" method="post">
        @csrf
            <button type="submit" name="submit" value="submit">Log in</button> 
        </form>
    </div>


    <div class="passw">Wachtwoord :</div>
        <div class="Button1">
            <input type="password"

            name= "wachtwoord" 
            placeholder="Max 4 numbers"
            maxlength="4">
        </div>
</body>
</html>

我知道有些地方不对,我改了一点,请原谅。
这是我的控制器:

class AuthController extends Controller
{

    public function verification(Request $request)
    {

        if ($request->post('wachtwoord') == '1507')
        { 
          \Session::put('ingelogd', 'yes');
          return redirect()->intended('/welcomescreen');
        }

        else
        {
          \Session::put('ingelogd', 'no');
          return redirect()->intended('/')->withErrors(['wachtwoord'=> 'Password incorrect, Try again']);
        }
    }
}

谢谢你!

b1zrtrql

b1zrtrql1#

<input type="text" id="phone" onkeyup="checkPassword()" />

并使checkPassword函数

function CheckPassword(inputtxt) 
{ 
    var passw=  /^[A-Za-z]\w{7,14}$/;
    if(inputtxt.value.match(passw)) 
    { 
       alert('Correct, try another...')
       return true;
    }
    else
    { 
       alert('Wrong...!')
       return false;
    }
}

相关问题