jQuery验证 - 检查两个密码是否相等

时间:2014-12-05 13:43:10

标签: javascript jquery validation

我在这里遇到一些问题,我有简单的引导程序表单,用于将更改密码集成到我的设计中,我想用jQuery验证它。

我想要的很简单,检查两个密码是否相同,如果没有,则显示一些错误消息。

我的HTML看起来像:

   <div class="container">
        <div class="row vertical-center">
        <br>
        <div class="col-md-6 col-md-offset-3">
        <br>
        <form role="form" action="" method="post">
          <div class="form-group">
            <label for="exampleInputEmail1">Meno (email)</label>
            <input class="form-control" id="disabledInput" type="text" placeholder="michal.melnikovic@audatex.cz" disabled>
          </div>
          <div class="form-group">
            <label for="text">Staré heslo</label>
            <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
          </div>
          <div class="form-group">
            <label for="password">Nové heslo</label>
            <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše nové heslo" name="password">
          </div>
          <div class="form-group">
          <label for="password_again">Again</label>
            <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe znova vaše nové heslo" name="password_again">
          </div>                    
          <button type="submit" class="btn btn-default">Zmeniť heslo</button>
        </form>
        </div>   
        </div>
    </div> 

我正在尝试添加类似的内容:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});
</script>

相同的脚本对我来说非常适合我的其他代码,所以它看起来我是盲目的,或者我不知道我在哪里犯了错误!

伙计们,你们有人可以不看我的代码几天看看这个并告诉我我做错了什么?

谢谢!

1 个答案:

答案 0 :(得分:0)

这对我有用:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Document</title>
    <meta charset="UTF-8">
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
    <form id="myform">
        <div class="form-group">
            <label for="exampleInputEmail1">Meno (email)</label>
            <input class="form-control" id="disabledInput" type="text" placeholder="michal.melnikovic@audatex.cz" disabled>
        </div>
        <div class="form-group">
            <label for="text">Staré heslo</label>
            <input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
        </div>
        <div class="form-group">
            <label for="password">Nové heslo</label>
            <input type="password" class="form-control" id="password" placeholder="Vložťe vaše nové heslo" name="password">
        </div>
        <div class="form-group">
            <label for="password_again">Again</label>
            <input type="password" class="form-control" id="password_again" placeholder="Vložťe znova vaše nové heslo" name="password_again">
        </div>
        <button type="submit" class="btn btn-default">Zmeniť heslo</button>
    </form>

        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
        <script>
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $("#myform").validate({
                rules: {
                    password: "required",
                    password_again: {
                        equalTo: "#password"
                    }
                }
            });
        </script>
</body>
</html>