`
ice-cream
  • 浏览: 319506 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

jquery学习之—构建功能型表单(二)

阅读更多

构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的表单功能。

然而,有时候表单中的内容也会以数字为主。

当处理作为表单内容的数字值时,也可以实现另外几种表单增强功能。

 

数字表单的典型代表就是购物车。在购物车表单中,应该允许用户更新购买的商品数量,同时,也要为用户提供价格和总金额的数字反馈。

 

构建功能行表单(二)


1.在操作表单前先为表格应用标准的行条纹效果,美化一下表格的外观

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass("odd");
}
 

2.拒绝非数字输入
通过javascript,可以检查用户输入的内容是否符合我们的要求,以便在将表单发送到服务器之前对用户给出反馈,这种技术叫做输入掩码。
输入验证是根据某些有效输入的标准来检查用户输入的过程。输入掩码会在用户填写内容的同时应用标准,并简单地禁止无效的按键操作。
比如,在这个购物车表单的例子中,必须在输入字段中填写数字。通过使用输入掩码验证,可以在这些字段获得焦点时,让非数字按键操作不起作用

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

在这里我们要观察的是keypress事件,这个事件不提供keyCode属性,但提供了charCode属性。

调用preventDefault()方法会阻止浏览器响应相应的事件。

 

3.数字计算

表单中有个recalculate按钮,单击这个按钮会把表单提交到服务器,重新计算总金额再把表单展示给用户。但是这个往返过程是不必要的,所有工作都可以在浏览器中通过jquery来完成。

在shipping行中显示订购商品的数量。但用户修改了其中一行的数量时,我们要合计所有输入值以得到新的数量,然后将总数显示在相应的单元格中。

$(".quantity input").change(function(){
	var totalQuantity = 0;
	$("#cart tbody tr").each(function(){
		var quantity = parseInt($(".quantity input",this).val());
		totalQuantity += quantity;
	});
	$(".shipping .quantity").text(String(totalQuantity));
});

我们只有在change事件发生时执行计算。这样,只有当用户离开字段并填写了同以前不一样的值时,才会导致重新计算总数量。

 

a.解析和格式化货币值

var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,""));
price = isNaN(price) ? 0 : price;
var cost = quantity * price;
$(".cost",this).text("$"+cost);

 用正则表达式去掉价格前的货币符号,然后把得到的字符传递给parseFloat(),把价格转成浮点数。

我们必须确保找到了数字值,如果没有则将其设置为0。最后,用价格乘以数量,再与$连接放到总费列中

 

b.处理小数位

用toFixed方法返回一个舍入到相应小数位后的浮点数的字符串

 

c.其他计算

1.合计subtotal行最后一列的总费用。

$(".quantity input").change(function(){
	var totalQuantity = 0;
	var totalCost = 0;
	$("#cart tbody tr").each(function(){
		var price = parseFloat($(".price",this).text().replace(/^[^\d.]*/,""));
		price = isNaN(price) ? 0 : price;
		var quantity = parseInt($(".quantity input",this).val());
		var cost = quantity * price;
		$(".cost",this).text("$"+cost.toFixed(2));
		totalQuantity += quantity;
		totalCost += cost;
	});
	$(".shipping .quantity").text(String(totalQuantity));
	$(".subtotal .cost").text("$" + totalCost.toFixed(2));
});
 

2.计算税金

为了计算税金,需要用相应的数字除以100得到税率,再用合计金额乘以税率。不过,计算税金时总要向上舍入的,因此必须保证在显示和计算时使用正确的值。

在这里,我们用税金乘以100会使它变成一个以分而不是元表示的值,通过Math.ceil()舍入这个值是安全的。舍入之后,再除以100就可以将这个值转换回以元表示的值。

var taxRate = parseFloat($(".tax .price").text())/100;
var tax = Math.ceil(totalCost * taxRate * 100)/100;
$(".tax .cost").text("$" + tax.toFixed(2));
totalCost += tax;
 

3.计算运费

用商品数量乘以单件商品的运输费率就可以得到总运费

var shippingRate = parseFloat($(".shipping .price").text().replace(/^[^\d.]*/,""));
var shipping = totalQuantity * shippingRate;
$(".shipping .cost").text("$" + shipping.toFixed(2));
totalCost += shipping;
 

现在我们已经完全重写了可能发生的任何服务器计算。因此,可以安全的隐藏recalculate按钮了

 

4.删除商品

如果购物者在把商品放到购物车中之后改变了注意,可以将相应商品的quantity字段修改为0。然而,我们还可以提供一种更可靠的行为,即为每件 商品都添加一个明确的delete按钮。虽然单击这个按钮的实际效果与修改quantity字段相同,但这种视觉上的反馈可以强化不会购买相应商品的事 实。

$("<th>&nbsp;</th>").insertAfter("#cart thead th:nth-child(2)");
$deleteButton = '<img src="images/delete.gif" width="16" height="16" title="remove from cart" alt="remove from cart" class="clickable" />';
$("<td></td>").append($deleteButton).insertAfter("#cart tbody td:nth-child(2)");
$("img.clickable").click(function(){
	$(this).parents("tr").hide().find(".quantity").children("input").val(0).trigger("change");
});
$("<td>&nbsp;</td>").insertAfter("#cart tfoot td:nth-child(2)");

 

分享到:
评论
1 楼 yangtao309 2009-07-21  
美女 加我MSN 想向你学习WEB前端技术
yangtao309@hotmail.com

相关推荐

    jQuery 表单验证插件

    jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)...

    jQuery基础教程

    随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用jQuery提供的丰富而强大的API。《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写...

    jQuery formValidator表单验证插件

    jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...

    jQuery基础教程.中文.带目录(1/2)

    jQuery基础教程.中文.带目录。需要下载2个部分压缩包,这是第1个,其它1个请到我的资源里查找。 目录 第1章 jQuery入门 第2章 选择符-取得你想要的一切 ...第8章 构建功能型表单 第9章 滑移和翻转 第10章 插件 ……

    jQuery基础教程(中文第2版)完整高清pdf

    随后3章从理论到实践,通过表格操作、构建功能型表单、实现滑移和翻转效果等实例,深入浅出地讲解了如何创造性地运用 jQuery提供的丰富而强大的API。本书最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是...

    jQuery基础教程.中文.带目录(2/2)

    jQuery基础教程.中文.带目录。需要下载2个部分压缩包,这是第1个,其它1个请到我的资源里查找。 目录 第1章 jQuery入门 第2章 选择符-取得你想要的一切 ...第8章 构建功能型表单 第9章 滑移和翻转 第10章 插件 ……

    jQuery formValidator 表单校验插件 4.1.0

    jQuery formValidator表单插件致力于改善重复编程、考虑浏览器兼容性等情况;你只关心业务逻辑,而无需关心实现过程,只需简单的配置,无需写代码就能实现表单的检验。 jQuery formValidator表单校验插件 4.1.0 ...

    jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

    支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 支持2种校验模式。第一种:文字提示(showword模式);...

    jquery基础教程高清版PDF.part5.rar

    第8章 构建功能型表单   8.1 渐进增强的表单设计   8.1.1 图标符号   8.1.2 必填字段的提示信息   8.1.3 根据条件显示的字段   8.2 表单验证   8.2.1 即时反馈   8.2.2 最终检查   8.3 复...

    Jqury基础教程

    第8章 构建功能型表单 8.1 改进基本的表单 8.1.1 渐进增强表单样式 8.1.2 根据条件显示的字段 8.1.3 表单验证 8.1.4 复选框操作 8.1.5 完成的代码 8.2 提升紧凑的表单 8.2.1 字段的占位符文本 8.2.2 AJAX...

    yii2-tree-manager:Yii 2 使用嵌套集的高级树管理模块

    Krajee 的增强型树管理模块,使用嵌套集选择和操作树节点。 下面列出了扩展功能: 一个完整的树管理解决方案,提供管理使用嵌套集存储的分层数据的能力。 利用扩展来管理数据库中的树结构。 在开始使用此模块之前...

    JAVA上百实例源码以及开源项目源代码

    2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程及操作源代码 6个目标文件,EJB来模拟银行ATM机的流程及操作:获取系统属性...

    JAVA上百实例源码以及开源项目

    笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此...

Global site tag (gtag.js) - Google Analytics