在 jquery 中对 keypress 、 keyup 和 keydown 进行实时验证答案

【问题标题】：real time validation in jquery on keypress , keyup and keydown在 jquery 中对 keypress 、 keyup 和 keydown 进行实时验证
【发布时间】：2015-04-01 18:53:32
【问题描述】：

这里的问题是名字和姓氏一起执行验证请在我单击名字文本字段验证时进行排序，验证应该只检查名字而不是姓氏...................... ..................................................... ......................................

<html>
<head>
<title>s1</title>

<style type="text/css">
    body  {font-family:"Trebuchet MS",verdana;width:800px;}
    #info {color:#008000;font-weight:bold; }
    #age  {width: 40px;}
    .error_msg { color: red;}
    #content{ color: red; }
    span.error {font-size: 11px; color: #D8000C; }
    .emsg{ color: red; }
    .hidden {  visibility:hidden;}
</style>
</head>
<body>
<form method="post" id="forms1">
    <fieldset>
        <legend><strong>Please fill the information</strong></legend>
            <table>
                <tbody>
                    <tr>
                        <td>First Name:</td>
                        <td><input type="text" id="fname"  class="required name" /> 
                             <span class="emsg hidden">Please Enter a Valid Name</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>
                        <td><input type="text" id="lname" class="required name"  />
                             <span class="emsg hidden">Please Enter a Valid Name</span>
                        </td>           
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td><input type="text" id="age" maxlength="3"  class="required age" />
                    </tr>
                    <tr>
                        <td>Address:</td>
                        <td><input type="text" id="address"/> </td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="Save" id="save" /></td>
                    </tr>
                    </tbody>
                </table>
    </fieldset>
</form>

<p id="content"></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function() 
{
var $regexname=/^[A-z]+$/;

$('.name').on('keypress keydown keyup',function()
{
    if (!$(this).val().match($regexname)) 
    {
       // there is a mismatch, hence show the error message

         $('.emsg').removeClass('hidden');
       $('.emsg').show();

   }
  else
    {
      // else, do not display message

       $('.emsg').addClass('hidden');
   }
});
});
</script>
</body>
</html>

【问题讨论】：

因为您使用类名来验证函数并且两个元素具有相同的类

标签： jquery

【解决方案1】：

这样试试

<script>
$(document).ready(function() 
{
var $regexname=/^[A-z]+$/;

$('#fname').on('keypress keydown keyup',function()
{
    if (!$(this).val().match($regexname)) 
    {
       // there is a mismatch, hence show the error message

         $('.emsg').removeClass('hidden');
       $('.emsg').show();

   }
  else
    {
      // else, do not display message

       $('.emsg').addClass('hidden');
   }
});
$('#lname').on('keypress keydown keyup',function()
{
    if (!$(this).val().match($regexname)) 
    {
       // there is a mismatch, hence show the error message

         $('.emsg').removeClass('hidden');
       $('.emsg').show();

   }
  else
    {
      // else, do not display message

       $('.emsg').addClass('hidden');
   }
});
});
</script>

【讨论】：

【解决方案2】：

你可以试试这个

    $('.name').on('blur',function(){
      if (!$(this).val().match($regexname)) 
      {
          // there is a mismatch, hence show the error message

           $(this).parent().find('.emsg').removeClass('hidden');
           $(this).parent().find('.emsg').show();

      }else{
             // else, do not display message

            $('.emsg').addClass('hidden');
      }
});

【讨论】：