Boostrap 相同的验证器 - pwd 和确认 pwd 匹配大小写

Question

我在页面中使用了以下引导程序相同的验证器。我已经搜索并厌倦了密码&确认密码匹配大写字母&下层也有。但是我没有得到预期的结果。请帮忙。

http://formvalidation.io/validators/identical/

输入：

密码-示例

确认密码-SamPle

如果输入是大写或小写，我希望相同的验证器接受密码匹配（示例）。

以下是我的代码：

<form method="POST" action="" accept-charset="UTF-8" id="createAccount" class="fv-form fv-form-bootstrap" novalidate="novalidate">              
                <div class="form-group">
                    <div class="row">
                         <div class="col-sm-4 text-right">
                              <label for="password" class="control-label">Password *:</label>
                         </div>
                         <div class="col-sm-6  has-feedback">
                              <input class="form-control" maxlength="10" name="password" type="password" id="password">
                         </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                         <div class="col-sm-4 text-right">
                              <label for="confirPassword" class="control-label">Confirm Password *:</label>
                         </div>
                         <div class="col-sm-6  has-feedback">
                              <input class="form-control" maxlength="10" name="confirmPassword" type="password">
                              <div id="error-id"></div>
                         </div>
                    </div>
                </div>
                <div class="form-group text-center">
                    <div class="row">
                         <div class="col-sm-12 text-center">
                              <button class="btn btn-success" type="submit" style="width:100px">Submit</button>
                         </div>
                    </div>
                </div>
        </form>

然后在引导程序验证器中

<script type="text/javascript">
$(document).ready(function() {
$('#createAccount')
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok icon-success',
            invalid: 'glyphicon glyphicon-remove icon-fail',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            password: {
                row: '.col-sm-6',
                validators: {
                    notEmpty: {
                        message: 'Password is required'
                    },
                             identical: {
                                  field: 'confirmPassword',
                                  message: 'The password and its confirm are not the same'
                             }
                }
            },
            confirmPassword: {
                row: '.col-sm-6',
                validators: {
                    notEmpty: {
                        message: 'Confirm password is required'
                    },
                             identical: {
                                  field: 'password',
                                  message: 'The password and its confirm are not the same'
                             }                               
                }
            },                
        }
    });
   });
  </script>

Answer 1

var password = document.getElementById("password")
, confirm_password = document.getElementById("confirm_password");
function validatePassword(){
if(password.value != confirm_password.value) {
confirm_password.setCustomValidity("Passwords Don't Match");
} else {
confirm_password.setCustomValidity('');
}
}
password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

演示

Answer 2

您可以通过将两个字符串都更改为大写，然后进行比较来实现这一点，类似于：

if (pw1.toUpperCase() === pw2.toUpperCase()) {
 // same values...
}
else {
 // different values...
}
: