Heim > Artikel > Web-Frontend > JS implementiert die Datenvalidierung und die Übermittlung von Kontrollkästchenformularen
JS implementiert die Datenvalidierung und die Übermittlung von Kontrollkästchenformularen
- php中世界最好的语言Original
- 2018-04-19 09:14:242613Durchsuche
Dieses Mal werde ich Ihnen JS zur Implementierung der Datenvalidierung und Kontrollkästchen-Formularübermittlung vorstellen einmal schauen.
Umsetzung:1. Wenn der Benutzer mindestens ein Element auswählt, bedeutet dies, dass die Zeile ausgewählt und die Daten der Zeile überprüft und das Formular gesendet werden. Andernfalls wird es nicht gesendet.
html
js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带数据验证和复选框的表单提交</title>
<script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script>
<style type="text/css">
table {
border-collapse: collapse;
}
td,th {
width: 40px;
height: 100px;
border:1px solid #000;
}
table tbody tr:hover {
background-color: red;
}
table tbody tr:not(:first-child):hover {background-color: #666;
}
td input[name='number']{
width: 100px;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" id="order_shopping" name="order_shopping" method="get" onsubmit="return checkShopping();">
<table id="table" class="fl">
<thead>
<tr>
<th>商品名</th>
<th>单价</th>
<th>购买数量</th>
<th><input id="both" type="checkbox" name="both" autocomplete="off"></th>
</tr>
</thead>
<tbody>
<tr>
<td>香蕉</td>
<td>100</td>
<td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td>
<td>
<input type="checkbox" name="choice" autocomplete="off">
</td>
</tr>
<tr>
<td>苹果</td>
<td>100</td>
<td><input type="text" name="number" autocomplete="off" placeholder="请输入数量"></td>
<td>
<input type="checkbox" name="choice" autocomplete="off">
</td>
</tr>
</tbody>
</table>
<input type="submit" id="add_shopping" value="添加购物车"/>
</form>
<p id="msg"></p>
</body>
</html>
<script type="text/javascript">
$(function(){
//全选
$("input[name='both']").click(function(){
var $isSelected = $(this).is(":checked");
for(var i = 0;i<$("input[name='choice']").length;i++){
$("input[name='choice']")[i].checked = $isSelected;
}
})
});
// 输入正确，且有选中该行复选框才提交
function checkShopping(){
$("#msg").html('');
var $checkbox = $("input[name='choice']");
var reg = /^[1-9]\d*$/;
var $number = "";
var isInteger = false;//记录数字是否正确
var moreOne = false;//选择复选框个数
$checkbox.each(function(){
if($(this).is(":checked")){
$number = $(this).parent().prev().children().val();
if(reg.test($number)){
isInteger = true;
moreOne = true;
}else{
$("#msg").html('提示：输入数量必须为正整数');
isInteger = false;
}
}
})
if(isInteger && moreOne){
return true;
}else if(!moreOne){
$("#msg").html('提示：至少选择一条信息');
return false;
}else{
return false;
}
}
</script> Ich glaube, Sie beherrschen die Methode zum Lesen dieses Artikels. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website! Empfohlene Lektüre:
JS implementiert problemlos Karussellbilder
So fügen Sie Vue0.1-Code zu Vue2.0 hinzu für Verwenden Sie
Ausführliches Einführungs-Tutorial für WebPack
Das obige ist der detaillierte Inhalt vonJS implementiert die Datenvalidierung und die Übermittlung von Kontrollkästchenformularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!