首先，选择方法

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

注意：

我正在使用免费的bootstrap模板。因此，所有代码都写在模板中，我尝试编辑它以满足我的需要并尝试理解它。

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，使用模式属性

许多输入类型都能够管理自己的模式（如电子邮件，电话，密码...）您必须在属性＆＃34; pattern＆＃34;中指定模式，没有分隔符/.../（和选项）

<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();
});

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

ASPX

JS

修改

注意：

Edit2：模式代码在validator.js中“随模板”

1 个答案:

首先，选择方法

如果您选择继续使用插件

或者我向你求一个更简单的