Question

我想验证输入的值是否正在使用try和catch。每次用户给出错误的值时，我都希望在填写错误的输入框旁边显示一条消息。

问题在于每次执行时，两个输入框中都会显示错误的消息，我不想放置很多条件。我只是想让它变得尽可能简单。我不知道应该使用什么条件。

$(document).ready(function() {
  $("#btn").click(function() {
    var inputArr = [$("#name").val(), $("#lName").val()];
    var regexArr = [new RegExp("\^[a-zA-z]+$"), new RegExp("\^[a-zA-z]+$")];
    for (var i = 0; i < inputArr.length; i++) {
      fn(regexArr[i], inputArr[i]);
    } //for loop

    function fn(exp, str) {
      var res = exp.test(str);
      try {
        if (res == false) {
          throw Error("wrong");
        }
      } catch (e) {
        alert(e);
        $("#empty1").fadeIn(3000);
        $("#empty1").html(e);
        $("#empty1").fadeOut(3000);
        $("#empty2").fadeIn(3000);
        $("#empty2").html(e);
        $("#empty2").fadeOut(3000);
      } //try and catch
    } //function
    
  }); //button
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  Name<input id="name"><span id="empty1"></span></br>
  </br>
  Last Name<input id="lName"><span id="empty2"></span></br>
  </br>
  <button id='btn'>Click</button>
</body>

</html>

Answer 1

对于表单验证，使用Jquery验证插件更好。它非常简单，需要包含Jquery库。试试这个https://jqueryvalidation.org/。请参考这个js小提琴https://jsfiddle.net/jfc62uof/6/

<form action="javascript:void(0)" id="myform" role="form" enctype="multipart/form-data" method="POST">
   <div class="form-group">
      <label><b>Password</b></label>
      <input type="password" class="form-control" placeholder="Password" name="psw" id="psw">
   </div>
   <div class="form-group">
      <label><b>Repeat Password</b></label>
      <input type="password" class="form-control" placeholder="Repeat Password" name="rpsw">
      <span id='message'></span>
   </div>
   <div class="form-group">
      <input type="submit" class="btn btn-primary" name="submit" value="save">
   </div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<script>
   $("#myform").validate({
     rules: {
       psw: {
         required: true
       },
       rpsw: {
         equalTo: "#psw"
       }
     }
   });
</script>

Answer 2

因为根据你的要求你想要它，

$(document).ready(function() {
      $("#btn").click(function() {
        var inputArr = [$("#name").val(), $("#lName").val()];
        var regexArr = [new RegExp("\^[a-zA-z]+$"), new RegExp("\^[a-zA-z]+$")];
        for (var i = 0; i < inputArr.length; i++) {
          fn(regexArr[i], inputArr[i],i+1);
        } //for loop

        function fn(exp, str, no) {
          var res = exp.test(str);
          try {
            if (res == false) {
              throw Error("wrong");
            }
          } catch (e) {
            //alert(e);
            if($('#err').length==0)
                $("#empty"+no).val('').addClass('error').after('<p style="display:inline;" id="err">'+e+'</p>');
          } //try and catch
        } //function

      }); //button
    });

其中错误类可以有像

这样的CSS

.error{
 border: 2px solid red;
 background-color: #f7b9d9;
}

使用try和catch jQuery验证用户输入

2 个答案: