如何在js中验证来自asp.net的密码？

Question

我有这个输入：

aspx

<input type="password" id="password" name="password" data-fv-stringlength-min="5" class="form-control col-md-7 col-xs-12" required="required" pattern="password" title="Follow the password requirement"/>

js

if( pattern ){
   var regex, jsRegex;
   switch( pattern ){
       case 'alphanumeric' :
          regex = /^[a-zA-Z0-9]+$/i;
          break;
       case 'numeric' :
          regex = /^[0-9]+$/i;
          break;
       case 'phone' :
          regex = /^\+?([0-9]|[-|' '])+$/i;
          break;
       case 'password':
          regex = /^(?=.{8,})(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "])+$/i;
              break;
     }
}

密码大小写不能正常工作。当我点击密码字段并输入任何字母时，它卡住了，我无法输入任何字母！

编辑

在 aspx 中，我使用以下脚本：

<!-- validator -->
    <script>
      // initialize the validator function
      validator.message.date = 'not a real date';

      // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
      $('form')
        .on('blur', 'input[required], input.optional, select.required', validator.checkField)
        .on('change', 'select.required', validator.checkField)
        .on('keypress', 'input[required][pattern]', validator.keypress);

      $('.multi.required').on('keyup blur', 'input', function() {
        validator.checkField.apply($(this).siblings().last()[0]);
      });

        //$('#add_member_form').formValidation();


      $('form').submit(function(e) {
        e.preventDefault();
        var submit = true;

        // evaluate the form using generic validaing
        if (!validator.checkAll($(this))) {
          submit = false;
        }

        if (submit)
          this.submit();

        return false;
      });
    </script>
    <!-- /validator -->

注意：

我正在使用免费的引导模板。因此，所有代码都写在模板中，我尝试对其进行编辑以适应我的需要并尝试理解它。

Edit2 : 模式代码在 validator.js 中“随模板一起提供”

var validator = (function($){
var message, tests;
message = {
        invalid         : 'invalid input',
        email           : 'email address is invalid',
tests = {
email : function(a){
            if ( !email_filter.test( a ) || a.match( email_illegalChars ) ){
                alertTxt = a ? message.email : message.empty;
                return false;
            }
            return true;
},
text: function (a, skip) {
if( pattern ){ // pattern code },
number : function(a){ // number code // },
date : function(a){ // date code // },

Answer 1

您的问题不清楚，需要更多详细信息

首先，选择一种方法

实际上，你有两种选择可以得到你想要做的事情。

HTML5，使用模式属性

许多输入类型都能够管理自己的模式 （如电子邮件、电话、密码……） 您必须将模式指定到属性“模式”中， 没有分隔符 /.../ （和选项）

<input 
   type="password" 
   id="password"
   name="password" 
   data-fv-stringlength-min="5" 
   class="form-control col-md-7 col-xs-12" 
   required="required" 

   pattern="^(?=.{8,})(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? \"])+$" 

   title="Follow the password requirement"/>

但要小心转义可能与属性引号冲突的引号

JS，来自一个控件 javascript

因为我不明白你在用你的“不完整”代码做什么（在你的帖子上方）。 我想，您已经在输入上定义了一些onKeyDown 事件，以便在用户在函数下编写和调用实际代码时捕获？ 我没有看到匹配输入值所需的条件！ 您能否更新您的帖子并提供更多详细信息，我也会更新我的。

---

如果您选择继续使用插件

好的，关于你的edit2，我猜是jquery.form.validator：

var validator = (function($){
var message, tests;
message = 
{
   invalid : 'invalid input',
   email   : 'email address is invalid',
};

tests = 
{
    // <input type="email">
    email : function(a)
    {
        if( !email_filter.test( a ) || a.match( email_illegalChars ) )
        {
            alertTxt = a ? message.email : message.empty;
            return false;
        }
        return true;
    },

    // this is for <input type="text">
    text: function (a, skip)
    {
        if( pattern ){ // pattern code },
    },

    // this is for <input type="number">
    number : function(a){ /* number code */ },
    date : function(a){ /* date code */ },

};

然后，我认为您必须将密码方法添加到测试中：

// this is for <input type="password">
password: function (a, skip)
{
    if( pattern ){ /* pattern code */},
},

---

或者我建议你，更简单的

通过重用您的原始代码，而不是需要解决方案的插件 来自您的（第一个重复帖子）How to validate password field in bootstrap?

注意：停止使用removeClass(...).addClass(...)，更喜欢 简短且相关的方法，例如toggleClass(classname, condition) 或switchClass(classbefore, classafter)

CSS

.invalid { color: red!important; } /* note this important flag is require to overwrite the .valid class */
.valid   { color: lime; }

HTML 提示

<div id="pswd_info">
  <h4>Password requirements:</h4>
     <ul>
       <li id="letter" class="fa-warning"> At least <strong>one letter</strong></li>
       <li id="capital"> At least <strong>one capital letter</strong></li>
       <li id="number"> At least <strong>one number</strong></li>
       <li id="special"> At least <strong>one special character</strong></li>
       <li id="length"> Be at least <strong>8 characters</strong></li>
       <li id="password"> Must contains at least <strong>8 characters</strong>, specials chars (#$!...) and numbers</li>
     </ul>
   </div>
</div>

jQuery

$("form input").on("keyup", function(event)
{
    var invalidClass = "invalid";
    var type = $(this).attr("type");
    var val = $(this).val();
    switch(type)
    {
        case "email": /*  */ break;
        case "phone": /* */ break;
        case "number": 
        {
            var smt = (/^\d$/i.test(val);
            $('#number').toggleClass(invalidClass, smt);
            break;
        }

        case "password": 
        {
            var smt = (/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/i.test(val);
            $('#password').toggleClass(invalidClass, smt);
            break;
        }
    }
}).on("focus", function()
{
    $('#pswd_info').show();

}).on("blur", function()
{
    $('#pswd_info').hide();
});