商城系统中【商品扩展属性】的表单生成及客户端验证

最新推荐文章于 2019-08-13 16:53:57 发布
最新推荐文章于 2019-08-13 16:53:57 发布
阅读量232 收藏
点赞数
分类专栏： Jquery 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ruan2012/article/details/84019768
版权

在功能稍强一些的商城系统(比如淘宝)中，发布商品时都会有类似“商品扩展属性”的选项(即：商品属性除共用的属性比如“名称”，“价格”之外，还会有一些属性会根据商品所在类别做一些动态调整，比如电脑类的商品会出现“内存”、“CPU速率”、“硬盘容量”等，而服装类的商品会出现“尺码”、“面料”等，我把这些动态调整的属性称之为“扩展属性”)

 

通常这些扩展属性的定义，我们可以用服务端语言动态以js数组的方式输出到页面的html源代码中，前台再用js读取数组动态生成相应的录入项，同时表单提交时还要对这些扩展属性的输入项做一些客户端的验证：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td align="right">
                产品名称：
            </td>
            <td>
                <input type="text" name="1" />
            </td>
        </tr>
        <tbody id="tbodyAppend">
        </tbody>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" value="验证输入" id="btnCheck" name="btnCheck" />
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        //扩展属性定义(实际开发中通常从后台输出 或 利用ajax异步加载) 
        var _data = { "Head": [
            { "F_DisplayName": "品牌", "F_FieldName": "PinPai", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "单选框", "F_DefaultValue": "康师傅|统一|其它,KangShiFu|TongYi|Others,TongYi", "F_IsRequired": "1" },
            { "F_DisplayName": "保质期", "F_FieldName": "BaoZhiQi", "F_ValueType": "整数", "F_ValueLength": "4", "F_InputType": "文本框", "F_DefaultValue": "12", "F_IsRequired": "0" },
            { "F_DisplayName": "产品描述", "F_FieldName": "MiaoShu", "F_ValueType": "字符串", "F_ValueLength": "20", "F_InputType": "文本域", "F_DefaultValue": "请输入详细描述", "F_IsRequired": "1" },
            { "F_DisplayName": "食用方式", "F_FieldName": "ShiYong", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "复选框", "F_DefaultValue": "开袋即食|加热|冰冻|其它,开袋即食|加热|冰冻|其它,加热|其它", "F_IsRequired": "1" },
            { "F_DisplayName": "可选颜色", "F_FieldName": "Color", "F_ValueType": "字符串", "F_ValueLength": "50", "F_InputType": "下拉框", "F_DefaultValue": "红色|蓝色,Red|Blue,Blue", "F_IsRequired": "1" },
			{ "F_DisplayName": "是否包邮", "F_FieldName": "BaoYou", "F_ValueType": "逻辑型", "F_ValueLength": "1", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "1" },
			{ "F_DisplayName": "重量", "F_FieldName": "Weight", "F_ValueType": "浮点数", "F_ValueLength": "10", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "0" },
			{ "F_DisplayName": "出厂日期", "F_FieldName": "CreateDate", "F_ValueType": "日期", "F_ValueLength": "50", "F_InputType": "文本框", "F_DefaultValue": "", "F_IsRequired": "1" }
            ]
        }
        var _append = $("#tbodyAppend");
        var _html = "";
        for (var i = 0; i < _data.Head.length; i++) {
            var _displayName = _data.Head[i].F_DisplayName;
            var _fieldName = _data.Head[i].F_FieldName;
            var _valueType = _data.Head[i].F_ValueType;
            var _valueLength = _data.Head[i].F_ValueLength;
            var _inputType = _data.Head[i].F_InputType;
            var _defaultValue = _data.Head[i].F_DefaultValue;
            var _isRequire = _data.Head[i].F_IsRequired;
            var _dvArr, _arrDisplay, _arrDisplay, j, _dv, _dvArr2, k;
            _html += "<tr><td align='right'>" + (_isRequire == "1" ? "<span style='color:red'>(*)</span>" : "") + _displayName + "：</td><td align='left'>";
            switch (_data.Head[i].F_InputType) {
                case "单选框":
                    _dvArr = _defaultValue.split(',');
                    if (_dvArr.length < 2) {
                        alert("单选框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    _arrDisplay = _dvArr[0].split('|');
                    _arrValue = _dvArr[1].split('|');
                    if (_arrDisplay.length != _arrValue.length) {
                        alert("单选框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    if (_dvArr.length == 3) {
                        _dv = _dvArr[2];
                    }
                    for (j = 0; j < _arrDisplay.length; j++) {
                        _html += "<input type='radio' " + (_dv == _arrValue[j] ? "checked" : "") + " value='" + _arrValue[j] + "' name='" + _fieldName + "' id='" + _fieldName + "_" + j + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "' /><label for='" + _fieldName + "_" + j + "'>" + _arrDisplay[j] + "</label>"
                    }
                    break;
                case "复选框":
                    _dvArr = _defaultValue.split(',');
                    if (_dvArr.length < 2) {
                        alert("复选框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    _arrDisplay = _dvArr[0].split('|');
                    _arrValue = _dvArr[1].split('|');
                    if (_arrDisplay.length != _arrValue.length) {
                        alert("复选框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    if (_dvArr.length == 3) {
                        _dv = _dvArr[2];
                    }
                    _dvArr2 = _dv.split('|');
                    for (j = 0; j < _arrDisplay.length; j++) {
                        var _checked = false;
                        for (k = 0; k < _dvArr2.length; k++) {
                            if (_dvArr2[k] == _arrValue[j]) {
                                _checked = true;
                            }
                        }
                        _html += "<input type='checkbox' " + (_checked ? "checked" : "") + " value='" + _arrValue[j] + "' name='" + _fieldName + "' id='" + _fieldName + "_" + j + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'/><label for='" + _fieldName + "_" + j + "'>" + _arrDisplay[j] + "</label>"
                    }
                    break;
                case "文本框":
                    _html += "<input type='text' id='" + _fieldName + "' name='" + _fieldName + "' value='" + _defaultValue + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'/>"
                    break;
                case "下拉框":
                    _dvArr = _defaultValue.split(',');
                    if (_dvArr.length < 2) {
                        alert("下拉框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    _arrDisplay = _dvArr[0].split('|');
                    _arrValue = _dvArr[1].split('|');
                    if (_arrDisplay.length != _arrValue.length) {
                        alert("下拉框[" + _displayName + "]默认值设置有误，请联系管理员!");
                        break;
                    }
                    if (_dvArr.length == 3) {
                        _dv = _dvArr[2];
                    }
                    _html += "<select name='" + _fieldName + "' id='" + _fieldName + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'>"
                    for (j = 0; j < _arrDisplay.length; j++) {
                        _html += "<option " + (_dv == _arrValue[j] ? "selected" : "") + " value='" + _arrValue[j] + "'>" + _arrDisplay[j] + "</option>";
                    }
                    _html += "</select>"
                    break;
                case "文本域":
                    _html += "<textarea rows='4' cols='60' id='" + _fieldName + "' name='" + _fieldName + "' dataType='" + _valueType + "' isRequired='" + _isRequire + "' maxLength='" + _valueLength + "' label='" + _displayName + "'>" + _defaultValue + "</textarea>"
                    break;
                default:
                    break;
            }
            _html += "</td></tr>";
        }
        _append.html(_html);
        //验证函数
        $("#btnCheck").click(function () {
            var nameArr = [];
            var objArr = $("#tbodyAppend [isRequired]");
            var i = 0;
            objArr.each(function (i) {
                var _o = { name: $(this).attr("name"), maxlength: parseInt($(this).attr("maxlength"), 10), label: $(this).attr("label"), type: this.type, tagName: this.tagName, dataType: $(this).attr("dataType"), isRequire: $(this).attr("isRequired") };
                if (!indexOfNameArr(nameArr, _o)) {
                    nameArr.push(_o);
                }
            })
            for (i = 0; i < nameArr.length; i++) {
                var obj = nameArr[i];
                var _e = document.getElementsByName(obj.name)[0];
                var v = _e.value; ;
                //单选框,或复选框
                if (obj.type == 'radio' || obj.type == 'checkbox') {
                    if (obj.isRequire == "1") {
                        v = getGroupValue(obj.name);
                        if (v == "") {
                            alert("请选择 [" + obj.label + "] ！");
                            setGroupfocus(obj.name);
                            return false;
                        }
                    }
                }
                else if (obj.isRequire == "1")//其它类型：比如文本框，下拉框，文本域
                {
                    if (v == "") {
                        alert("请输入 [" + obj.label + "] ！");
                        _e.focus();
                        return false;
                    }
                }

                //检测数据长度              
                if (obj.maxlength > 0 && v.length > obj.maxlength) {
                    alert("[" + obj.label + "]的有效数据长度不得超过[" + obj.maxlength + "]个字符");
                    _e.focus();
                    return false;
                }
                //检测数据类型
                if (obj.dataType == "日期") {
                    if (v.length > 0) {
                        if (!(isDate(v) || isDateTime(v))) {
                            alert("[" + obj.label + "]为日期/日期时间类型，必须输入有效的日期格式\n\n\t格式：“年-月-日”或“年-月-日 时:分:秒”");
                            _e.focus();
                            return false;
                        }
                    }
                }
                else if (obj.dataType == "整数") {
                    var _intV = parseInt(v, 10);
                    if (isNaN(_intV)) {
                        alert("[" + obj.label + "]为整数类型，必须输入整数值");
                        _e.focus();
                        return false;
                    }
                    else {
                        _e.value = _intV;
                    }
                }
                else if (obj.dataType == "浮点数" || obj.dataType == "货币") {
                    if (v.length > 0) {
                        var _floatV = parseFloat(v);
                        if (isNaN(_floatV)) {
                            alert("[" + obj.label + "]为数字类型，必须输入有效的数字");
                            _e.focus();
                            return false;
                        }
                        else {
                            _e.value = _floatV;
                        }
                    }
                }
                else if (obj.dataType == "逻辑型") {
                    if (v.length > 0) {
                        if (!(v == "1" || v == "0")) {
                            alert("[" + obj.label + "]为逻辑型数据，其值只能为“1”或“0”");
                            _e.focus();
                            return false;
                        }
                    }
                }
            }
            alert("验证通过!");
            return true;
        })

        //获取某一单选/复选组的值
        function getGroupValue(groupName) {
            var g = document.getElementsByName(groupName);
            var result = "";
            for (var k = 0; k < g.length; k++) {
                if (g[k].checked) {
                    result = g[k].value;
                    break;
                }
            }
            return result;
        }
        //设置某一单选/复选组焦点
        function setGroupfocus(groupName) {
            document.getElementsByName(groupName)[0].focus();
        }
        //辅助函数，用于查找arr中有无o元素
        function indexOfNameArr(arr, o) {
            var result = false;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].name == o.name) {
                    result = true;
                    break;
                }
            }
            return result;
        }
        //检测是否日期格式(格式: 年-月-日)
        function isDate(str) {
            var reg = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/
            if (reg.test(str)) return true;
            return false;
        }
        //检测是否日期时间格式(格式:年-月-日 时:分:秒)
        function isDateTime(str) {
            var reg = /^((\d{2}(([02468][048])|([13579][26]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|([1-2][0-9])))))|(\d{2}(([02468][1235679])|([13579][01345789]))[\-\/\s]?((((0?[13578])|(1[02]))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))[\-\/\s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[\-\/\s]?((0?[1-9])|(1[0-9])|(2[0-8]))))))(\s(((0?[0-9])|([1][0-9])|([2][0-4]))\:([0-5]?[0-9])((\s)|(\:([0-5]?[0-9])))))?$/
            if (reg.test(str)) return true;
            return false;
        }
		
    </script>
</body>
</html>

 

文章转自：http://www.cnblogs.com/yjmyzz/archive/2010/05/16/1736901.html

【商城实战(86)】解锁商城部署新姿势：Docker容器化实战
邓邓子的博客
03-28 895
本文介绍Docker在商城项目中的应用。首先阐述Docker概念、原理，包括镜像、容器、仓库等核心概念，基于Linux内核特性的工作原理及安装方法。接着讲述打造商城项目专属镜像，涵盖uniapp、Element plus前端项目和Spring Boot后端项目的打包，以及Mybatis-plus数据库配置。然后介绍运行容器命令及商城项目部署实战，并说明验证部署成果的方式。最后总结Docker在商城项目中快速部署、保证环境一致、资源隔离等优势，展望其与容器编排工具、云平台结合及加强安全的发展前景。
基于ASP.NET C#的服装商城管理系统
weixin_47958760的博客
12-27 2004
设计并且实现一个基于net语言的服装商城管理系统。它是在Windows下，以SQL Server为数据库开发平台，服装商城管理系统的功能已基本实现，主要包括用户、服装信息、通知公告、留言板、订单信息等。 论文主要从系统的分析与设计 、数据库设计和系统的详细设计等几个方面来进行论述，系统分析与设计部分主要论述了系统的功能分析、系统的设计思路，数据库设计主要论述了数据库的设计，系统的详细设计部分主要论述了几个主要模块的详细设计过程。
jquery实现商品sku多属性选择功能（商品详情页）
10-15
主要介绍了jquery实现商品sku多属性选择功能（商品详情页）,文中简单给大家介绍了sku的概念，需要的朋友可以参考下
商品扩展属性一个参考
一名普通码农的菜地
06-06 2748
http://www.cnblogs.com/sunxi/articles/2572079.html
商品的扩展属性及相关——开篇
weixin_33895016的博客
10-31 1020
  说在前面 　　其实早就想写这方面的了，只是由于各种原因一直拖到现在。终于开始动笔了。另外过了这么多年了，也不知道这种做法是否已经过时了。 　　商品的扩展属性，有很多种设计方案，这里只是我设想的一种。 　　按照惯例又要写一个系列了，这个系列包括商品信息的建立（商品基本信息、扩展属性等），以及SKU和SPU的区别和设计，然后是购物车和订单的设计（简单版）。 　　说道订单，电商平台的订单就...
品优购06——商家后台-商品录入（扩展属性）
看不懂的人的博客
09-07 1055
商品录入【扩展属性】 3.1需求分析 在商品录入实现扩展属性的录入。 3.2代码实现 修改goodsController.js  ，在用户更新模板ID时，读取模板中的扩展属性赋给商品的扩展属性。 //扩展属性 $scope.entity.tbGoodsDesc.customAttributeItems=JSON.parse($scope.typelTem...
查询商品扩展多属性
y_y_y_k_k_k_k的专栏
08-13 228
第一种 SELECT COUNT(*) FROM t_product p WHERE p.productTypeId=1 AND EXISTS (SELECT 'x' FROM t_productext ext WHERE ext.ProductID=p.ProductID AND ext.ItemCode='system' AND ext.ItemValue='win7') AND E...
原创手写Java网上商城系统源码及数据库设计
在该项目中，JSP用于生成动态内容，如商品列表、用户信息等，并能够处理表单提交和数据验证。 - **HTML (HyperText Markup Language)**: 是用于创建网页的标准标记语言。在该项目的WebContent目录下，HTML文件定义...
基于Javaweb的网上商城项目源码
03-19
5. **商品分类展示**：商城项目中的“查询全部类别”和“全部类别及建立产品表.mp4”可能涵盖了如何设计和管理数据库中的商品类别，以及如何将这些类别在前端以树状结构或列表形式展示出来，方便用户浏览。...
基于Java和JavaScript的母婴商城网站设计源码
最新发布
09-24
在当今信息化快速发展的时代，电子商务成为了人们日常生活中不可或缺的一部分，尤其是母婴商品，其市场需求日益增长，因此对于专业的母婴商城网站设计的研究和开发显得尤为重要。本文所介绍的项目是一个基于Java和...
jQuery仿淘宝商品多规格SKU，自动生成表格表单
06-25
jQuery仿淘宝商品多规格SKU，自动生成表格表单，jQuery仿淘宝SKU选择商品属性代码
在表单中动态生成n多的商品属性,然后一起提交,想在商品对象中定义一个属性数组来接收属性,怎么办?
有志者一定行
10-21 812
JAVA: 如果不加index下标来指定,我在goodsAttributeForm中拿到的是Null对象,我换成ArrayList也是一样得到的是Null对象.
中小型超市系统中的分类/产品属性/扩展属性的数据库设计
孙琛斌的专栏
12-26 8695
中小型商城系统中的分类/产品属性/扩展属性的数据库设计       正文：       之前发表过一篇"商城系统中【商品扩展属性】的表单生成及客户端验证"，部分童鞋对于后台数据库的设计比较感兴趣，于是今天把这部分也补上。       一、产品分类设计       越来越多的商城系统都热衷于选择“无限级分类”的设计，我也不例外，因为它方便扩展。这部分就不详细展开了，详见
类别扩展属性
王正魁
12-07 351
// //  NSURLConnection+WZKConnection.h //  WZKPony // //  Created by 王正魁 on 15-1-5. //  Copyright (c) 2015年 psylife. All rights reserved. // #import @interface NSU
什么是扩展属性
lee576的专栏
12-18 6595
今天在书上看到一个比较陌生的东西"扩展属性"，看完以后明白，其实扩展属性就是给数据库对象添加说明注释文字的 ，比如说要解释一下某字段的含义是什么，可以给它加上中文说明用法如下:　　EXEC sp_addextendedproperty CRid, 表示ID, user, dbo, table, clientInfo, column,CRid       --添加属性
中小型商城系统中的分类/产品属性/扩展属性的数据库设计
行路难，难于上青天
09-14 7022
声明：之所以定位在"中小型"商城系统，而非“大型”(指淘宝、拍拍这类巨无霸)，理由很简单----我一直都呆在(创业型的)小公司，没见过这些大家伙是怎么设计的:)   正文： 之前发表过一篇"商城系统中【商品扩展属性】的表单生成及客户端验证"，部分童鞋对于后台数据库的设计比较感兴趣，于是今天把这部分也补上。   一、产品分类设计 越来越多的商城系统都热衷于选择“无限级
关于商品属性设计
热门推荐
十三别闹
01-26 1万+
商品属性设计目录商品属性设计目录 实际需求 简单例举一下 属性名称个数不定 属性表属性值表设计 属性与属性值关系 实际例子 数据库设计 表之间的关系图 拓展属性管理 产品管理总结下，项目中碰到的“商品属性”问题 实际需求 实际需求 现在要做一个产品管理功能， 刚拿到公司的实际产品信息，发现跟以往项目中产品不同。每一类产品基本上除了 品牌、类别是公共的，其它属性名称，个数都不一样。如下:简单例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值