Question

我正在尝试使用jQuery查看电子邮件是否有效，但在开始时我已经向电子邮件值以及indexOf值和lastIndexOf值发出警报但是我无法看到这些当我点击ragister时按钮屏幕来得非常快。

<script src="jquery-2.2.1.min.js"></script>
<script>
  $(document).ready(function() {
    $(".sbt_button").click(function() {
      var error_arr = [];
      var email_value = $("#email").val();
      alert(email_value);
      var position_of_at = email_value.value.indexOf('@');
      alert(position_of_at);
      var position_of_dot = email_value.value.lastIndexOf('.');
      alert(position_of_dot);


      if ($("#fname").val() == null || $("#fname").val() == "") {
        var err = "First Name";
        error_arr.push(err);
      }
      if ($("#lname").val() == null || $("#lname").val() == "") {
        var err = "Last Name ";
        error_arr.push(err);
      }
      if (position_of_at == -1 || position_of_dot == -1 || (position_of_at + 2) >= position_of_dot) {
        var err = "Email ";
        error_arr.push(err);
      }

      if ($("#dob").val() == null || $("#dob").val() == "") {
        var err = "Date of Birth ";
        error_arr.push(err);
      }

      if (!$("input[type='radio']").is(":checked")) {
        var err = "Gender ";
        error_arr.push(err);
      }

      if (!$("input[type='checkbox']").is(":checked")) {
        var err = "Hobbies ";
        error_arr.push(err);
      }


      alert(error_arr);

    });
  });
</script>
</head>

<body>
  <form class="form" name="myForm" action="" method="get">
    <table>
      <tr>
        <p class="heading">Ragistration Form</p>
      </tr>
      <tr>
        <td class="field_Name">First Name :<b style="color:red">*</b>
        </td>
        <td>
          <input type="text" name="fname" id="fname" class="inputfield_Name" />
        </td>
      </tr>
      <tr>
        <td class="field_Name">Last Name :<b style="color:red">*</b>
        </td>
        <td>
          <input type="text" name="lname" id="lname" class="inputfield_Name" />
        </td>
      </tr>
      <tr>
        <td class="field_Name">Email :<b style="color:red">*</b>
        </td>
        <td>
          <input type="text" name="email" id="email" class="inputfield_Name" />
        </td>
      </tr>
      <tr>
        <td class="field_Name">Date of Birth :<b style="color:red">*</b>
        </td>
        <td>
          <input type="date" name="dob" id="dob" class="inputfield_Name" />
        </td>
      </tr>
      <tr>
        <td class="field_Name">Gender :<b style="color:red">*</b>
        </td>
        <td>
          <input type="radio" name="gender" id="mf" class="inputfield_Name" />Male
          <input type="radio" name="gender" />Female</td>
      </tr>
      <tr>
        <td class="field_Name">About Yourself :</td>
        <td>
          <textarea class="inputfield_Name"></textarea>
        </td>
      </tr>
      <tr>
        <td class="field_Name">Hobbies :<b style="color:red">*</b>
        </td>
        <td>
          <input type="checkbox" id="hobbies" class="inputfield_Name" />Cricket
          <input type="checkbox" />Singing
          <input type="checkbox" />Travling</td>
        <tr>
          <td></td>
          <td>
            <input type="checkbox" class="inputfield_Name" />Writing
            <input type="checkbox" />Teaching
            <input type="checkbox" />Driving
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            <input type="submit" value="Ragister" name="sbt_save" class="sbt_button" />
          </td>
          </td>
        </tr>
    </table>
  </form>
</body>
</html>

Answer 1

添加

if(error_arr.length){
   return false;
}

在点击功能结束时。这背后的逻辑是如果error_arr为空，那么表单是有效的。如果它无效，那么它将输入条件并且表格不会被提交。

$(document).ready(function(e)
{        
    $(".sbt_button").click(function(event)
    {       

        // Rest of your code
        if(error_arr.length){
           event.preventDefault()
        }
        alert(error_arr);

    });
});

无法看到警报..想要检查电子邮件是否有效..使用jQuery

1 个答案: