Question

我创造了这个：

<form class="form-horizontal" method="post" action="profile.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Card Number</label>
        <div class="col-sm-7"> 
            <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
        </div>
        <button class="btn btn-primary demo1" type="submit" id="submit" onclick="check()">SEARCH</button>
</div>

当卡片的长度大于或小于16时，必须显示警告信息。所以我尝试了这个：

$('#submit').onclick(function() {
    var inputlength = $('#card_no').val().length;
    if (inputlength<>16) {
        sweetAlert("ERROR", "Card must have 16 digits", "warning");
        return false;
    }
});

但它不起作用。当没有输入时我也有警报并且工作正常！有什么想法吗？

Answer 1

使用if(inputlength !== 16)

$('#submit').on('click',function() {
  var inputlength = $('#card_no').val().length;
  if (inputlength !== 16) {
    sweetAlert("ERROR", "Card must have 16 digits", "warning");
    return false;
  }
});

<link href="https://cdn.jsdelivr.net/sweetalert/1.1.3/sweetalert.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert/1.1.3/sweetalert.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
  <div class="form-group">
    <label class="col-sm-2 control-label">Card Number</label>
    <div class="col-sm-7">
      <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
    </div>
    <button class="btn btn-primary demo1" type="submit" id="submit">SEARCH</button>
  </div>
</form>

Answer 2

这应该有效。只需使用alert更改sweetAlert

$('#submit').click(function() {
    var inputlength = $('#card_no').val().length;
    if (inputlength!=16) {
        alert("ERROR", "Card must have 16 digits", "warning");
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Card Number</label>
        <div class="col-sm-7"> 
            <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
        </div>
        <button class="btn btn-primary demo1" type="submit" id="submit">SEARCH</button>
</div>

Answer 3

请参阅下面的示例，并根据需要进行调整。使用!=设置它，以便当输入的值小于或大于定义的值时，将触发警报。

$('#submit').on("click", function() {
  
  var $inputlength = $('#card_no').val();
  
  if ($inputlength != 16) {
    
    alert('ERROR, Card must have 16 digits. "warning!"'); 
    
    /* Change "alert" to sweetAlert */
    
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
  <div class="form-group">
    <label class="col-sm-2 control-label">Card Number</label>
    <div class="col-sm-7">
      <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
    </div>

    <button type="submit" id="submit" ">SEARCH</button>
</div>

Answer 4

如果要调用该函数，则需要命名函数check()。此外，逻辑运算符不正确，有＆lt;＆gt;和＆lt;＆gt;需要测试输入。

$('#submit').onclick(function check() {

          var inputlength = $('#card_no').val().length;

         if (inputlength<16) {
        alert("ERROR", "Card must have 16 digits", "warning");
                return false;
       }
     });

输入大于或小于16位时的警报消息

4 个答案: