新建HTML 页面 .html，编写HTML 代码、JavaScript脚本代码，实 现如下界面，包括所属类型、商品名称、商品价格、会员价、提供厂商、商品简介 等信息
新建HTML 页面 demo3.html，编写HTML 代码、JavaScript脚本代码，实 现如下界面，包括所属类型、商品名称、商品价格、会员价、提供厂商、商品简介 等信息，在提交表单时，判断表单中是否有空文本框，如果有则弹窗提示“提交信 息不允许为空”，运行界面如图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品信息</title>
<script>
function checkForm() {
var type = document.getElementById("type").value;
var name = document.getElementById("name").value;
var price = document.getElementById("price").value;
var vipPrice = document.getElementById("vip-price").value;
var manufacturer = document.getElementById("manufacturer").value;
var description = document.getElementById("description").value;
if (type === "" || name === "" || price === "" || vipPrice === "" || manufacturer === "" || description === "") {
alert("提交信息不允许为空");
return false;
}
return true;
}
function resetForm() {
document.getElementById("type").value = "数码产品";
document.getElementById("subtype").value = "数码相机";
document.getElementById("name").value = "";
document.getElementById("price").value = "";
document.getElementById("vip-price").value = "";
document.getElementById("manufacturer").value = "";
document.getElementById("description").value = "";
}
</script>
</head>
<body>
<h1>商品信息</h1>
<form onsubmit="return checkForm()">
<p>
<label>所属类型：</label>
<select id="type" name="type">
<option value="数码产品">数码产品</option>
</select>
<select id="subtype" name="subtype">
<option value="数码相机">数码相机</option>
</select>
</p>
<p>
<label>商品名称：</label>
<input type="text" id="name" name="name">
</p>
<p>
<label>商品价格：</label>
<input type="text" id="price" name="price">
</p>
<p>
<label>会员价：</label>
<input type="text" id="vip-price" name="vip-price">
</p>
<p>
<label>提供厂商：</label>
<input type="text" id="manufacturer" name="manufacturer">
</p>
<p>
<label>商品简介：</label>
<textarea id="description" name="description"></textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="button" value="重置" onclick="resetForm()">
</p>
</form>
</body>
</html>
<html>
<head>
<title>商品信息表单</title>
<meta charset="utf-8">
<script>
function validateForm() {
var inputs = document.getElementsByTagName("input");
var textarea = document.getElementById("description");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value === "") {
alert("提交信息不允许为空");
return false;
}
}
if (textarea.value === "") {
alert("提交信息不允许为空");
return false;
}
}
</script>
</head>
<body>
<h2>商品信息表单</h2>
<form onsubmit="return validateForm()">
所属类型:
<select>
<!-- 在此处添加选项 -->
<option value="category1">数码设备</option>
<option value="category2">零食小吃</option>
<option value="category3">生活用品</option>
</select>
<br><br>
商品名称:
<select>
<!-- 在此处添加选项 -->
<option value="product1">数码相机</option>
<option value="product2">辣条</option>
<option value="product3">毛巾</option>
</select>
<br><br>
商品价格:
<input type="text" name="price">
<br><br>
会员价:
<input type="text" name="memberPrice">
<br><br>
提供厂商:
<input type="text" name="manufacturer">
<br><br>
商品简介:
<textarea name="description" rows="4"></textarea>
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
先看结果：
在看代码：
<!-- 2023年6月16日11:37:21 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品信息</title>
</head>
<body>
<form onsubmit="return validateForm()">
<div>
<label>所属类型:</label>
<select name="type" id="type">
<option value="数码设备">数码设备</option>
<option value="数码设备">数码设备002</option>
<option value="数码设备">数码设备003</option>
</select>
<select name="type" id="type">
<option value="数码相机">数码相机</option>
<option value="数码相机">数码相机002</option>
<option value="数码相机">数码相机003</option>
</select>
</div>
<div>
<label for="name">商品名称:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="price">商品价格:</label>
<input type="text" id="price" name="price">
</div>
<div>
<label for="vipPrice">会员价:</label>
<input type="text" id="vipPrice" name="vipPrice">
</div>
<div>
<label for="factory">提供厂商:</label>
<input type="text" id="factory" name="factory">
</div>
<div>
<label for="intro">商品简介:</label>
<textarea id="intro" name="intro" rows="5" cols="33"></textarea>
</div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<script>
function validateForm() {
let type = document.querySelector('input[name="type"]:checked').value;
let name = document.getElementById("name").value;
let price = document.getElementById("price").value;
let vipPrice = document.getElementById("vipPrice").value;
let factory = document.getElementById("factory").value;
let intro = document.getElementById("intro").value;
if (type == undefined) {
alert("请选择所属类型");
return false;
} else if (name == "" || price == "" || vipPrice == "" || factory == "" || intro == "") {
alert("提交信息不允许为空");
return false;
}
return true;
}
</script>
</body>
</html>