ホームページ > 記事 > ウェブフロントエンド > JS はデータ検証とチェックボックスフォームの送信を実装します
JS はデータ検証とチェックボックスフォームの送信を実装します
- php中世界最好的语言オリジナル
- 2018-04-19 09:14:242683ブラウズ
今回は、JS でデータ検証とチェック ボックス フォームの送信を実装するための 注意事項 について、実際のケースを見てみましょう。
実装:
1. ユーザーが少なくとも 1 つの項目を選択した場合、その行が選択されたことを意味し、その行のデータが検証されてフォームが送信されます。それ以外の場合、フォームは送信されません。
html
<!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>
js
<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>
この記事を読む方法はもうマスターされたと思います。さらに興味をそそられる場合は、PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
カルーセル画像を簡単に実装するためのJSVue0.1のコードをVue2.0に追加して使用する方法WebPack入門チュートリアルの詳細な説明以上がJS はデータ検証とチェックボックスフォームの送信を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。