这段代码定义了CSS样式来布局产品名称输入框和提交按钮。使用JavaScript的jQuery库进行事件监听，当用户点击提交时，验证产品名称是否为空或包含数字。如果不符合要求，显示错误信息；否则重定向到product.html页面。
<style>
#search div:nth-child(1){ //左浮动"产品名称" 后代div
float: left;
width: 100px;
margin-right: 10px; //间距
text-align:right; //右对齐
}
#search div:nth-child(2){
width: 150px;
margin-left: 110px;
}
#submit input{
width: 268px;
margin-top: 10px;//与上一行的空隙
}
#error{
color: #ff0000;
}
</style>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$().ready(function(){
$("#submit input").click(function(){
//执行验证
var prodName = $("#search div:nth-child(2) input").val();
var errorMsg = "";
if(prodName == ""){
errorMsg="产品名称必须输入";
}
else if(/\d/.test(prodName)){
errorMsg="产品名称不能有数字";
}
//显示出错信息
if(errorMsg != ""){
$("#error").text(errorMsg);
}
//未出错
else{
document.location.href = "product.html";
}
});
});
</script>
5242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
