代码
- 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>
- css代码
visibility 设置元素是否可见
.err{
visibility: visible;
color:red;
font-weight: bold;
}
- jquery代码
<script src="Js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$('#pwd').blur(function () {
if ($('input[name=pwd]').val() != ${user.pwd}) {
$('#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');
return false;
}else {
$("#newpwd2_err").css('visibility','hidden');
return true;
}
});
});
</script>
相关参考
jquery控制元素显示隐藏的几种方法
jquery验证两次密码是否一致并阻止表单提交