Question

我希望验证First＆amp; jQuery中的姓氏。由于项目要求，我不想使用jQuery验证插件。

这是我打算实现的目标：



如果 both input boxes 为空 error message 应指明第二个输入框为空（ eg... Yahoo Sign-up Page ）



如果 one 的 input box filled ，则 empty box 应 highlighted in red along with error message. < / p>


我在哪里放置其他验证码，例如 denies special characters 和<在每个方框中强> numbers ？



只要 validation passes ， box should turn green 。

HTML code：

<html>
   <head>
   <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="retail_banking_validation.js"></script>
    <link rel="stylesheet" type="text/css" href="retail_banking.css" >
</head>
<body>

<form action=""  name="myForm" method="get" >  
<div id="container"> 
    <fieldset> 
        <legend>Login Page</legend>
             <div class="first_container">Name</div>
                <div id ="nameBlock">
                    <input type="text" name="fname" placeholder="First" id="cust_fname" />
                    <input type="text" name="lname" placeholder="Last"  id="cust_lname" /><br>
                </div>

                <div id="name_error_msg"></div><br>

    </fieldset>
</div> 

</form>
</body>
</html>

jQuery代码：

$(document).ready(function() {
      var fname = $('#cust_fname');
      var lname = $('#cust_lname');
      var error_msg = $('#name_error_msg'); 
      var regex  = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>\/?\\-]+$/ ;


    $("input").blur(function(){       

        if( $(fname).val().length === 0) {  

              $(error_msg).text("First name can't be empty");
              $(this).css("border", "1px solid red");
              return false}


          else if($(lname).val().length === 0) {
               $(error_msg).text("Last name can't be empty");             
                  $(this).css("border", "1px solid red");
                  return false; }

        $(error_msg).text("");
        $(this).css("border", "1px solid green");  

          });

    });

CSS代码：

fieldset {
    width: 30%;
    border: solid 1px black;}

legend {
    color: black;
    font-style: italic;
    font-size: 15px;
    border: solid 1px black;
    margin: 25px; }

.first_container {
    padding: 3px;
    width: 150px;
    font-style: italic;
    font-weight: bold;
    color: #a77;}

#nameBlock {
    display: inline-block;}

#cust_fname {
    margin: 3px;
    padding: 5px;
    width: 170px;}

#cust_lname {
    margin: 5px;
    padding: 5px;
    width: 170px;}

#name_error_msg{
 margin: 5px;
 color: red; }

代码的当前行为：

当选项卡绕过空输入框时，错误信息为显示为“名字不能为空”

而 it should be 为“姓氏不能为空”
让我们说，如果我们将第一个盒子填到第二个盒子，那就是第一个盒子颜色仍然是红色。

按惯例，当我们移开焦点时，它应该变成“绿色”。的 (considering validation is passed)
此外，当我们在第二个输入框中输入内容并进一步移动时，此时只有第二个框变为“绿色”。的 (considering validation is passed)

而第一个盒子的颜色仍然是“红色”
现在，要将第一个方框设为“绿色”，我们必须垂直向上移动从2＆gt; 1＆gt; 2 (denotes index of box)

Answer 1

不想或无法使用像 jQuery Validation 这样的插件可以为您提供额外的工作。它可能令人沮丧，但是它就像对待动物一样对待它，你现在可以看到你实际使用的功能。

现在我们可以看到的第一件事就是当我们查看你的jQuery函数时：

$("input").blur(function() {

  if ($(fname).val().length === 0) {

    $(error_msg).text("First name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  } else if ($(lname).val().length === 0) {
    $(error_msg).text("Last name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  }
  // Add if statement for 
  $(error_msg).text("");
  $(this).css("border", "1px solid green");

});

让我们将您的blur()代码放入单词中，这样您也可以理解它。

如果名字输入元素为空，请显示错误消息，   并使当前元素的边框亮红色并退出   if statement 。

如果名字元素不是为空，而是姓氏元素    IS 为空，显示错误消息并使当前元素的边框显示为红色。

如果没有元素为空，请将当前元素的边框设为绿色。

因此，这有助于了解您的代码出错了什么：

如果First Name输入元素或两个元素都为空，则始终显示“First name not empty”，因为return false;退出if语句。
当所有内容都填写完毕后，只有您当前填写的元素会在调用blur()事件时更改其边框，因为您在this中使用$(this).css("border", "1px solid green");仅表示调用模糊事件的当前输入元素将获得绿色边框。当您单击名字的输入框，然后单击其外部时，现在将为该输入元素调用模糊事件，并且也将获得绿色边界。现在我认为这不是你想要的。

那么，您的代码必须做什么？

页面应显示您聚焦的最后一个字段的错误消息。

在调用blur（）事件后，空输入元素应该会出现红色边框

某些字段应拒绝特殊字符和数字

如果验证成功，两个框都必须变为绿色。

$(document).ready(function() {
  var fname = $('#cust_fname');
  var lname = $('#cust_lname');
  var error_msg = $('#name_error_msg');
  var regex = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>\/?\\-]+$/;

  var checkForm = function() {

    $('#nameBlock input').each(function() {
      if ($(this).attr('name') === 'fname' && $(this).val().length === 0) {
        $(error_msg).text("First name can't be empty");
        $(this).css('border', '1px solid red');
      } else if ($(this).attr('name') === 'lname' && $(this).val().length === 0) {
        $(error_msg).text("Last name can't be empty");
        $(this).css('border', '1px solid red');
      } else {
        $(this).css('border', '1px solid green');
      }
    });
  };

  $('#nameBlock input').blur(function() {
    if ($(this).val().length === 0) {
      switch ($(this).attr('name')) {
        case 'fname':
          $(error_msg).text("First name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        case 'lname':
          $(error_msg).text("Last name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        default:
          $(error_msg).text("");
          break;
      }
    } else {
      $(error_msg).text("");
      $(this).css('border', '1px solid green');
      checkForm();
    }

  });

});

fieldset {
  width: 30%;
  border: solid 1px black;
}
legend {
  color: black;
  font-style: italic;
  font-size: 15px;
  border: solid 1px black;
  margin: 25px;
}
.first_container {
  padding: 3px;
  width: 150px;
  font-style: italic;
  font-weight: bold;
  color: #a77;
}
#nameBlock {
  display: inline-block;
}
#cust_fname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#cust_lname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#name_error_msg {
  margin: 5px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form action="" name="myForm" method="get">
  <div id="container">
    <fieldset>
      <legend>Login Page</legend>
      <div class="first_container">Name</div>
      <div id="nameBlock">
        <input type="text" name="fname" placeholder="First" id="cust_fname" />
        <input type="text" name="lname" placeholder="Last" id="cust_lname" />
      </div>

      <div id="name_error_msg"></div>
      <br>

    </fieldset>
  </div>

</form>

因此，我使用了switch case而不是你的if语句。我查看了Yahoo的页面，并在我的代码中模拟了它们名称块的这种行为。我还添加了一个checkForm函数，它检查整个输入块以查看是否有任何输入无效。现在我的代码执行以下操作：

检查当前字段，如果为空，则为其指定一个红色边框，并根据字段的name属性显示错误。

如果它不为空，请将border设置为绿色。

此外，执行checkForm函数，该函数将通过所有输入并再次检查它们，以防前一个字段为空。

如果checkForm找到空字段，则显示错误。

如果您有任何问题，请随时发表评论。

不使用jQuery插件进行名称验证

1 个答案: