使用 Html 和 javascript 重置密码

Question

我有一个要求，我有 3 个输入字段，即

1.old password
2.new password
3.confirm password.

为此我需要应用如下规则。

1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.

如果所有这些验证都通过，则只应提交表单。
这是我需要应用 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>

谢谢

Answer 1

创建一个函数并调用按钮的 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>

你的 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>

Answer 2

请替换为您的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;
    }
}

您需要在 thml 中添加

<form onsubmit="return checkForm();" ----- >

对于重置，您可以像这样创建一个函数

function resetForm()
{
        var oldP=document.getElementById("oldP").value="";
        var newP=document.getElementById("newP").value="";
        var confirmP =document.getElementById("confirmP").value="";
}

并在需要表格重置时调用。

Answer 3

首先你应该点击提交按钮并检查字段

$([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。我用这种风格编写代码是因为我想展示所有步骤。当然，您可以将“if”合二为一以清除代码。例如，您可以组合检查 1 和检查 3，并将其放入检查 2

的其他块中

Answer 4

<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>

使用 Html 和 javascript 重置密码

Reset Password Using Html and javascript

html

javascript

passwords

validation

jquery