Javascript 在表单中显示密码不匹配或其强度的错误消息

我有以下代码：

<fieldset>
<p>                    
    <label>Password*</label>
    <input type="password" placeholder="Password" name="pswd" id="psd"/>

    <label>Confirm Password*</label>
    <input type="password" name="cpswd" placeholder=" retype Password" id="cpsd" />

    <label class="obinfo">* obligatory fields</label>
</p>
</fieldset>

<?php
    $pwd = $_POST['pswd'];

    if (preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $pwd))
    {
        echo "Your password is good.";
    } 
    else 
    {
        echo "Your password is bad.";
    }
?>

密码*
确认密码*
*必填字段

目前代码只是检查密码是否正确（强）。它给出了错误的未定义索引pswd。我是这方面的新手。我对javascript或jQuery了解不多。是否有一种方法可以检查密码强度，并查看它们是否与php匹配？还要让我知道打印表单中所有消息的方法。提前感谢。

使用：

<?php
if(isset($_POST['pswd'])){//You need to check if $_POST['pswd'] is set or not as when user visits the page $_POST['pswd'] is not set.
$pwd = $_POST['pswd'];

if (preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $pwd))
    echo "Your password is good.";
 else
    echo "Your password is bad.";
}
?>

---

首先，确保

操作是

“

或自己的页面名称，因为它看起来就是您希望它进入的页面名称

那么，你应该这样做

if (isset($_POST['pswd']))
{
    $pwd = $_POST['pswd'];

    if (preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $pwd)){
        echo "Your password is good.";
    } else {
        echo "Your password is bad.";
    }
}

---

对于使用jquery进行客户端验证，有很多jquery插件可用 提供了一些链接，您可以查看演示

我个人的建议是使用validate js。 alos还实现服务器端验证，因为可以在浏览器中禁用javascript

有关使用php进行服务器端验证的信息，请参见以下链接

---

希望它能对你有所帮助。

说真的，你可以用这种方法：，但有一种更好的方法——自己动手

$(function(){
    var $spanMsg = $('<span/>', {class: 'span-msg'});

    $('input#psd').on('keyup.checkPswd', function(){
        var $that = $(this);
        var $thisSpanMsg = $that.siblings('span.span-msg').length ? $that.siblings('span.span-msg') : $spanMsg.clone().insertAfter($that);
        if (!/.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$/.test($that.val())) {
            $thisSpanMsg.removeClass('span-msg-green').addClass('span-msg-red').text('Wrong password!');    
        } else {
            $thisSpanMsg.removeClass('span-msg-red').addClass('span-msg-green').text('Password is correct!');
        }
    });

    $('input#cpsd').on('keyup.checkPswdMatch', function(){
        var $that = $(this);
        var $thisSpanMsg = $that.siblings('span.span-msg').length ? $that.siblings('span.span-msg') : $spanMsg.clone().insertAfter($that);
        if ($that.val() != $('input#psd').val()) {
            $thisSpanMsg.removeClass('span-msg-green').addClass('span-msg-red').text('Passwords don\'t match!');    
        } else {
            $thisSpanMsg.removeClass('span-msg-red').addClass('span-msg-green').text('Confirm password is correct!');
        }
    });
});

$（函数（）{
var$spanMsg=$（“”，{class:'span msg'}）；
$（'input#psd'）。on（'keyup.checkPswd'，function（）{
var$that=$（this）；
var$thisSpanMsg=$that.sibbins（'span.span msg'）。长度？$that.sibbins（'span.span msg'）：$spanMsg.clone（）.insertAfter（$that）；
如果（！/.^（？=.{8,20}）（？=.[a-z]）（？=.[a-z]）（？=.[0-9]）.$/.test（$that.val（）））{
$thisSpanMsg.removeClass（'span-msg-green'）.addClass（'span-msg-red'）.text（'error password！'）；
}否则{
$thisSpanMsg.removeClass（'span-msg-red'）。addClass（'span-msg-green'）。text（'Password is correct！'）；
}
});
$（'input#cpsd'）。on（'keyup.checkPswdMatch'，function（）{
var$that=$（this）；
var$thisSpanMsg=$that.sibbins（'span.span msg'）。长度？$that.sibbins（'span.span msg'）：$spanMsg.clone（）.insertAfter（$that）；
如果（$that.val（）！=$（'input#psd'）.val（））{
$thisSpanMsg.removeClass（'span-msg-green'）.addClass（'span-msg-red'）.text（'Passwords not match！'）；
}否则{
$thisSpanMsg.removeClass（'span-msg-red'）.addClass（'span-msg-green'）.text（'Confirm password is correct！'）；
}
});
});

尝试Subhankers&@BeatAlex answers，但将php放在表单html上方，以便在呈现表单之前检查密码是否正确。这样，您就可以将来自php的消息以表单的形式输出。