检查密码是否等于jQuery
Check if passwords are equal jQuery
我试图验证两个输入的密码是否相同。但是我好像不能使它工作。无论我在输入字段中输入什么值,结果总是"true"。你能看出我做错了什么吗?
HTML:<div class="form-group" id="password">
<input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="form-group" id="repassword">
<input type="password" class="form-control" placeholder="Confirm Password" name="repassword">
</div>
jQuery: //Check if password is set
$('input[name=password]').blur(function() {
if($(this).val().length == 0){
$('#password').addClass('has-error');
} else {
$('#password').addClass('has-success');
}
});
//Check if repassword is set
$('input[name=repassword]').blur(function() {
if($(this).val().length == 0){
$('#repassword').addClass('has-error');
} else {
$('#repassword').addClass('has-success');
}
});
//Check if password and repassword are equal
$('input[name=password]').blur(function() {
if ($(this).attr('value') !== $('input[name=repassword]').attr('value')) {
$('#password').addClass('has-error');
$('#repassword').addClass('has-error');
} else {
$('#password').addClass('has-success');
$('#repassword').addClass('has-success');
}
});
您应该使用.val()
来获取文本框
你可以把整个东西简化成这样:
$('input').blur(function() {
var pass = $('input[name=password]').val();
var repass = $('input[name=repassword]').val();
if(($('input[name=password]').val().length == 0) || ($('input[name=repassword]').val().length == 0)){
$('#password').addClass('has-error');
}
else if (pass != repass) {
$('#password').addClass('has-error');
$('#repassword').addClass('has-error');
}
else {
$('#password').removeClass().addClass('has-success');
$('#repassword').removeClass().addClass('has-success');
}
});
您可以使用$('input').blur(function()
代替,这样它将触发所有输入
你永远不会删除任何类,你必须删除它们才能使其工作,否则css专一性将只显示最特定类的样式
可以写得更简单
$('input[name=password], input[name=repassword]').on('change', function () {
var password = $('input[name=password]'),
repassword = $('input[name=repassword]'),
both = password.add(repassword).removeClass('has-success has-error');
password.addClass(
password.val().length > 0 ? 'has-success' : 'has-error'
);
repassword.addClass(
password.val().length > 0 ? 'has-success' : 'has-error'
);
if (password.val() != repassword.val()) {
both.addClass('has-error');
}
});
小提琴
使用domElem.value
或$(domElem).val()
获取form
元素的值:
WORKING JSFIDDLE DEMO
$('input').on('input',function() {
var pass = $('input[name=password]'),
reps = $('input[name=repassword]'),
pass_cont = $('#password'),
reps_cont = $('#repassword');
!$(this).is( '[name=password]' ) || $(function() {
pass_cont.addClass( pass.val().length === 0 ? 'has-error' : 'has-success' )
.removeClass( pass.val().length === 0 ? 'has-success' : 'has-error' );
})();
!$(this).is( '[name=repassword]' ) || $(function() {
reps_cont.addClass( reps.val() === pass.val() ? 'has-success' : 'has-error' )
.removeClass( reps.val() === pass.val() ? 'has-error' : 'has-success' );
})();
});
应该是$(this).val()
,而不是$(this).attr('value')
。当其中一个字段被模糊时,检查两个字段:
$('input').blur(function () {
if ($('input[name=password]').val() != $('input[name=repassword]').val()) {
$('#password').removeClass().addClass('has-error');
$('#repassword').removeClass().addClass('has-error');
} else {
$('#password').removeClass().addClass('has-success');
$('#repassword').removeClass().addClass('has-success');
}
});
<<p> jsFiddle例子/strong> 除了其他人所说的使用val()
而不是attr('val')
(可以从HTML中派生)来获取元素的值之外,这个例子也不起作用,因为:
- 在添加
has-error
和has-success
类之前,您需要删除一个或另一个 - 正在检查第一个密码字段的第二个密码字段
onblur
的值。似乎你应该比较两个在一个事件处理程序在adeneo的答案。
一种更通用的方法,使用类而无需重新查找jquery对象:
$('.psw') .on('keyup', checkPasses)
function checkPasses (e) {
$ps1 = $(e.delegateTarget)
$ps2 = $ps1.siblings('.psw')
$pss = $ps1.add($ps2)
if ( $ps1.val() == $ps2.val() ) {
$pss.css('color', 'green')[0].setCustomValidity('')
} else {
$pss.css('color', 'red')[0].setCustomValidity('Passwords do not match')
}
}
相关文章:
- JQuery是否有一个“;移动“;作用或者有没有一种更紧凑的方法来做到这一点
- angular如何确定jQuery是否存在
- 当调用.of()然后调用.on()时,Jquery是否可能将事件推迟
- jqGrid 或 jQuery 是否具有在字符串中缓存 DOM 更改的功能?
- 这两行jQuery是否等效
- jQuery-是否可以使用jQuery在隐藏的文本框中设置值
- jQuery是否满足完全匹配类的条件
- jQuery是否覆盖事件侦听器
- jQuery是否存在于当前页面中
- jQuery是否提供带有背景淡入淡出小部件的叠加层
- 如何检测动态加载时加载的jquery是否加载
- jQuery - 是否可以将鼠标悬停到另一个元素
- jQuery是否可以用JavaScript替换文本,然后执行
- JQuery 是否仍在评估选择器 RTL
- javascript 或 jQuery 是否有任何技术来创建最终用户可以即时收缩或扩展的保存对象
- jQuery:是否可以在单击时更改无ID/无类元素
- jquery是否可以在AngularJs中使用
- JQuery是否用于onclick/onchange
- 如何确定jQuery是否已完全初始化
- Jquery:是否有类似于$(document).ready()的基于元素的方法