使用 HTML 和 javascript 重置密码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33493267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reset Password Using Html and javascript
提问by Vijay Kumar
I Have a requirement where i have 3 input fields namely
我有一个要求，即我有 3 个输入字段
1.old password
2.new password
3.confirm password.
1.旧密码
2.新密码
3.确认密码。
For which i need to apply rules as follows.
为此，我需要应用如下规则。
1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.
1.新旧密码不能匹配。
2.没有字段应该是空的。
3.新密码和确认密码输入要一致。
If all these validations passes then only form should be submitted.
Here is the Html file for which i need to apply js
如果所有这些验证都通过，则只应提交表单。
这是我需要应用js的Html文件
<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>thank you
谢谢你
采纳答案by Anand Singh
Please replace with your ids..
请用您的ID替换..
function checkForm()
{
var oldP=document.getElementById("oldP").value;
var newP=document.getElementById("newP").value;
var confirmP =document.getElementById("confirmP").value;
if(oldP!=""&&newP!=""&&confirmP!="")
{
if(oldP!=newP)
{
if(newP==confirmP)
{
return true;
}
else
{
alert("Confirm password is not same as you new password.");
return false;
}
}
else
{
alert(" This Is Your Old Password,Please Provide A New Password");
return false;
}
}
else
{
alert("All Fields Are Required");
return false;
}
}
An in thml you need to add
您需要添加一个 in thml
<form onsubmit="return checkForm();" ----- >
For reset you can create a function somting like this
对于重置，您可以创建一个像这样的函数
function resetForm()
{
var oldP=document.getElementById("oldP").value="";
var newP=document.getElementById("newP").value="";
var confirmP =document.getElementById("confirmP").value="";
}
and call when you want form reset.
并在您想要重置表格时致电。
回答by Ravi Kanth
create a function and call on onClick of button
创建一个函数并调用按钮的 onClick
<button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>
Your javascript Function will be Like this
您的 javascript 函数将是这样的
<script>
function Function() {
var oldpasswprd = document.getElementById('oldPassword').value;
var newpassword = document.getElementById('newPassword').value;
var confirmpassword = document.getElementById('confirmPassword').value;
if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
alert('Please fill all the details');
}
else if (oldpasswprd == newpassword) {
alert("Old password and New Password cannot be same");
}
else if (newpassword != confirmpassword) {
alert("password mismatch");
}
}
</script>
回答by Иван Брагин
firstly you should catch the click avtion on submit button and check the fields
首先，您应该捕捉提交按钮上的点击按钮并检查字段
$([name=Submit]).on('click', function(e) {
if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
e.preventDefault();
}
if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
e.preventDefault();
}
if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
e.preventDefault();
}
}
P.S. i wrote code in this style because i want to show all steps. shurely you can combine 'if's in one to clear your code. as example u can combine check 1 and check 3 and put it in else block of check 2
PS 我以这种风格编写代码是因为我想显示所有步骤。当然，您可以将“如果”合二为一来清除您的代码。例如，您可以将检查 1 和检查 3 组合起来，然后将其放入检查 2 的 else 块中
