输入大于或小于 16 位数字时的警告消息
Alert message when input is greater or lower than 16 digits
我创建了这个:
<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;
}
});
但是没用。当没有输入并且工作正常时,我也会收到警报!有什么想法吗?
如果要调用函数,您需要为函数命名 check()
。还有,逻辑运算符不对,有一个<>,需要一个<来测试输入。
$('#submit').onclick(function check() {
var inputlength = $('#card_no').val().length;
if (inputlength<16) {
alert("ERROR", "Card must have 16 digits", "warning");
return false;
}
});
这应该有效。只需将 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>
参见下面的示例并根据需要进行调整。使用 !=
设置它,以便当输入的值小于或大于定义的值时,将触发警报。
$('#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>
使用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>
我创建了这个:
<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;
}
});
但是没用。当没有输入并且工作正常时,我也会收到警报!有什么想法吗?
如果要调用函数,您需要为函数命名 check()
。还有,逻辑运算符不对,有一个<>,需要一个<来测试输入。
$('#submit').onclick(function check() {
var inputlength = $('#card_no').val().length;
if (inputlength<16) {
alert("ERROR", "Card must have 16 digits", "warning");
return false;
}
});
这应该有效。只需将 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>
参见下面的示例并根据需要进行调整。使用 !=
设置它,以便当输入的值小于或大于定义的值时,将触发警报。
$('#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>
使用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>