jQuery密码错误后输出提示信息，表单提交前检验密码是否正确

代码

1. htm代码

<td width="80px">原密码：</td>
<td width="150px"><input class="text" type="password" id="pwd" name="pwd" required/></td>
<td class="err" id="err">*原密码不匹配</td>

<td width="80px"> 新密码：</td>
<td width="150px"><input class="text" type="password" id="newpwd" name="newpwd" required /></td>

<td width="80px">确认密码：</td>
<td width="150px"><input class="text" type="password" id="newpwd2" name="newpwd2" required /></td>
<td class="err" id="newpwd2_err">两次密码不相同</td>

<td width="150px"><input class="btn" type="submit" value="提交" /></td>

2. css代码
   visibility 设置元素是否可见

.err{
    visibility: visible;
    color:red;
    font-weight: bold;
}

4. jquery代码

 <script src="Js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
        	// 失去焦点后，判断密码是否相等。如果不相等，就让错误信息显示
            $('#pwd').blur(function () {
                if ($('input[name=pwd]').val() != ${user.pwd}) {
                	//通过css函数设置属性的值
                    $('#err').css('visibility','visible');
                }else {
                    $('#err').css('visibility','hidden');
                }
            });
        })

        $(function(){
        	//通过设置提交按钮的点击函数来判断两次密码是否相同，相同就可以提交表单
            $('input[type=submit]').click(function () {
                if($("#newpwd").val()!=$('#newpwd2').val()){
                    $("#newpwd2_err").css('visibility','visible');
                    //返回false，表单不提交
                    return false;
                }else {
                    $("#newpwd2_err").css('visibility','hidden');
                    //返回true，表单提交
                    return true;
                }
            });
        });

    </script>

相关参考

jquery控制元素显示隐藏的几种方法
jquery验证两次密码是否一致并阻止表单提交