1、界面美化
（1）为产品名称所在的div添加样式属性，使得产品名称保持在文本框的左边；
（2）调整产品名称所在div的宽度和间距，使得产品名称文字右边缘到浏览器左边界的距离为100px；再使产品名称文字到右边文本框的间距为10px；
（3）调整录入按钮的宽度，使其右边刚好与文本框的右边齐平。
2、数据验证约束
（1）点击“录入”按钮后执行数据验证；
（2）产品名称必须输入；
（3）产品名称中不能有数字；
（3）如果验证未通过则将错误消息填充至id为error的div中，并将错误消息以红色(#ff0000)显示；
（4）如果全部验证通过，则跳转至产品主页面product.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品录入</title>
<style>
div {
font-size: 14px;
}
#search input {
width: 150px;
}
/* 上为初始样式 */
#search div:first-child {
float: left;
width: 100px;
text-align: right;
margin-right: 10px;
}
#submit input {
margin-top: 15px;
width: 268px;
}
#error {
color: #ff0000;
}
</style>
<link href="css/input.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="search">
<div>产品名称</div>
<div><input type="text" placeholder="请输入产品名称"></div>
</div>
<div id="error"></div>
<div id="submit"><input type="button" value="录入" onclick="checkdata()"></div>
<script>
function checkdata() {
let name = document.getElementsByTagName("input")[0].value
if (name == "") {
document.getElementById("error").innerHTML = "请输入产品名称"
} else if (/\d/.test(name)) {
document.getElementById("error").innerHTML = "产品名称中不能有数字"
} else {
window.location.href = "product.html"
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
