web前端模拟题学习330142

最新推荐文章于 2024-09-14 16:44:55 发布

XFjsj330

最新推荐文章于 2024-09-14 16:44:55 发布

阅读量90

点赞数

文章标签： json css vue.js node.js

本文链接：https://blog.csdn.net/TJJjsj/article/details/130167363

版权

文章讲述了如何使用CSS对产品录入界面进行美化，包括设置div布局，调整元素间距和宽度。同时，通过JavaScript实现了数据验证功能，确保产品名称非空且不包含数字，验证失败时显示红色错误消息，成功则跳转至产品主页面。

摘要由CSDN通过智能技术生成

1、界面美化

已有一个产品录入界面input.html，采用div+css布局，请按要求新增样式表美化界面。

浏览器左边界

产品名称

请输入产品名称

文本框width为150px

间距调整为10px

录入

将距离调整为100px

已设置好，不需要再设置

调整宽度

（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>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #search div:nth-child(1){
            float: left;
            width: 100px;
            padding-right: 10px;
            text-align: right;
        }
        #submit input{
            width: 268px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $().ready(function(){
            //注册事件
            $("#submit input").click(function () {
                var searchText = $("#search input").val();
                if(searchText == ""){
                    $("#error").text("产品名称必须输入");	//方法1
	                $("#error").css("color", "#ff0000");
                }
                //else if(/\d/.test(searchText)){	//方法a
                else if(new RegExp("\\d").test(searchText)){	//方法b
                    $("#error").html("<span style='color:#ff0000'>产品名称中不能有数字</span>");	//方法2
                }
                else{
                    window.location.href = "product.html";
                }
            });
        });
    </script>
</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="录入"></div>
</body>
</html>