冷静
- 浏览: 146001 次
- 性别:
- 来自: 佛山
-
文章分类
最新评论
-
C393416691：
JNA—JNI终结者,java调用dll、ocx、so最简单的方法 -
C393416691：
JNA—JNI终结者,java调用dll、ocx、so最简单的方法 -
C393416691：
[flash=200,200][url][img][list] ...
JNA—JNI终结者,java调用dll、ocx、so最简单的方法 -
zhdycn：
感谢 LZ 的分享 都把核心 接口 都介绍了一下 一看你 ...
Spring3 MVC -
naily：
naily 写道很非常详细，对于了解spring mvc很有帮 ...
Spring3 MVC
在功能稍强一些的商城系统(比如淘宝)中，发布商品时都会有类似“商品扩展属性”的选项(即：商品属性除共用的属性比如“名称”，“价格”之外，还会有一些属性会根据商品所在类别做一些动态调整，比如电脑类的商品会出现“内存”、“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
分享到：
发表评论
相关推荐
5. **商品分类展示**：商城项目中的“查询全部类别”和“全部类别及建立产品表.mp4”可能涵盖了如何设计和管理数据库中的商品类别，以及如何将这些类别在前端以树状结构或列表形式展示出来，方便用户浏览。...
这个实例展示了如何利用Servlet实现一个功能完善的网上商城系统，涵盖了用户注册、登录、商品浏览、购物车、订单处理等一系列电子商务功能。 在Java Web开发中，Servlet主要负责接收HTTP请求，处理业务逻辑，并将...
在学子商城项目中，jQuery可能被用来实现如点击登录按钮后的表单验证和提交、商品图片的滑动展示等动态效果。 除了基础的HTML、CSS和JavaScript外，标签中提到了"java"，这可能意味着后端开发也涉及到了Java技术。...
这些前端技术在购物网站中不可或缺，如商品轮播图、下拉菜单、表单验证等。 9. **Maven或Gradle构建工具**： - Maven或Gradle用于项目管理和依赖管理，确保所有所需的库和框架能正确引入并构建项目。 10. **...
### ThinkPHP 3.2.3 开发大型商城项目完整笔记 #### 一、ThinkPHP框架简介 **1. 什么是框架？** 框架是预先设计好的软件架构，它提供了一套标准的方式来组织代码，帮助开发者更快地构建应用程序。ThinkPHP框架...
- **表单验证**：利用JavaScript进行表单输入验证，减少服务器负担。 3. **安全机制**：为了保障用户数据安全，采取了一系列措施： - **密码加密**：用户密码在存储前进行加密处理。 - **SQL注入防护**：使用预...
- 商城系统：实现商品浏览、购物车、订单处理等功能。 - 内容管理系统：动态生成和更新网站内容。 六、JSP的优缺点 优点： - 易于分离表现层和业务逻辑。 - 支持多种模板技术和标签库，提高开发效率。 - 可扩展性强...
在文件上传过程中，Servlet主要负责处理客户端的请求，接收上传的文件，并将其保存到服务器的指定位置。 **文件上传流程**： 1. 用户在JSP页面上选择文件，点击提交按钮。 2. 浏览器将文件作为多部分/FormData数据...
系统主要运用在：主要运用于系统的表单验证比如登录注册验证码以及一些需要不刷新页面的异步提交页面（在车票查询，登录注册表单验证页面使用到了，还有是一些删除操作也使用到了） 前端页面使用的jsp（Java服务端...
Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件，EJB来模拟银行ATM机的流程及操作：获取系统属性，初始化JNDI，取得Home对象的引用，创建EJB对象，并将当前的计数器初始化，调用每一个...
- **参数映射**：MyBatis提供了参数映射机制，可以将Java对象的属性映射到SQL语句中的参数。 - **结果集映射**：支持将数据库查询结果映射为Java对象。 ### 6. JPA (Java Persistence API) JPA 是Java平台的标准...