我有一个项目,我必须在其中添加一个注册表,并且想要在不单击“注册”按钮的情况下验证密码和确认字段是否相等。
如果密码和确认密码字段不匹配,那么我也想在确认密码字段的旁边放置一条错误消息,并禁用注册按钮。
以下是我的html代码。
<form id="form" name="form" method="post" action="registration.php"> <label >username : <input name="username" id="username" type="text" /></label> <br> <label >password : <input name="password" id="password" type="password" /></label> <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" /> </label> <label> <input type="submit" name="submit" value="registration" /> </label>
有什么办法吗?在此先感谢您的帮助。
我们将研究实现这一目标的两种方法。使用和不使用jQuery。
您需要将添加KEYUP功能,您的密码和确认密码字段。原因是即使password字段更改,也应检查文本相等性。感谢@kdjernigan指出
password
这样,当您在字段中键入内容时,您将知道密码是否相同:
$('#password, #confirm_password').on('keyup', function () { if ($('#password').val() == $('#confirm_password').val()) { $('#message').html('Matching').css('color', 'green'); } else $('#message').html('Not Matching').css('color', 'red'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>password : <input name="password" id="password" type="password" /> </label> <br> <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" /> <span id='message'></span> </label>
这是小提琴:http : //jsfiddle.net/aelor/F6sEv/325/
我们将在两个字段上使用javascript 的onkeyup事件来达到相同的效果。
var check = function() { if (document.getElementById('password').value == document.getElementById('confirm_password').value) { document.getElementById('message').style.color = 'green'; document.getElementById('message').innerHTML = 'matching'; } else { document.getElementById('message').style.color = 'red'; document.getElementById('message').innerHTML = 'not matching'; } } <label>password : <input name="password" id="password" type="password" onkeyup='check();' /> </label> <br> <label>confirm password: <input type="password" name="confirm_password" id="confirm_password" onkeyup='check();' /> <span id='message'></span> </label>
这是小提琴:http : //jsfiddle.net/aelor/F6sEv/324/