Javascript级联下拉菜单以及AJAX数据验证核心代码

虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了《JavaScript高级程序设计》里的方法。使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源。

一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次。

需求
1、根据下拉菜单产品名称、产品包装的选择,右面的图片要进行相应的变化。
2、产品名称、产品包装、生产日期、生产批次都验证正确后,右图出现相应的提示。

简要说明
使用Prototyp.js完成类的构建,面向对象的方式实现功能,事件导向让代码更清晰明了,使用AJAX的状态管理,让验证过程对用户更友好,JSON作为数据源的执行效率也让人满意。
Linkage Drop Down List And AJAX Validation
This JS script has special meaning for me.
I got a new start one year ago, the first task was to solve this linkage drop down list and data validation. At that time I had no deep understanding of Javascript. With my ability of study, after the reference to the code of colleague's, I finally finished it in several days.
Although I used Prototype.js to code, I still used the method in the to make up Class. In the process of AJAX validation, I used XML as data source at the beginning. Aftet time past, I changed data source from XML to JSON for the low efficiency of XML.
Now the clients have new requirements, they need four data to be validated. So I rebuild the scripts.
Requirements:
1. change images of products with the change of product name and package.
2. after the validation with product name, package, date, batch, change images of products.
Brief:
Construct class with Prototype.js, use OOP's approach and event management to make a clear idea.
The management of AJAX status let the process be more friendly for customer. I'm also satisfied with the efficiency of JSON.
核心代码 | Core Code:


代码如下:

var ValidProduct = Class.create();
ValidProduct.prototype = {
initialize:function(prodData,validDataUrl,validData,prodType,prodPack,prodDate,prodPatch,prodImg,validBtn,validMsg){
this.prodData = $H(prodData); //产品类别数据 | product type data
this.validDataUrl = validDataUrl; //验证数据路径 | product data url
this.validData = validData; //验证数据 | product data
this.prodType = $(prodType); //产品验证类别 | product type
this.prodPack = $(prodPack); //产品验证包装 | product package
this.prodDate = prodDate; //产品验证日期ID | product date
this.prodPatch = prodPatch; //产品验证批次ID | product batch
this.prodImg = $(prodImg); //产品验证图片 | product images
this.validBtn = $(validBtn); //产品验证按钮 | validate button
this.validMsg = $(validMsg); //产品验证过程提示 | validate message
this.init();
},
init:function(){//程序初始化 | Application init
this.productTypeBind();
this.prodType.observe("change",this.productTypeChange.bind(this));
this.prodPack.observe("change",this.productPackChange.bind(this));
this.validBtn.observe("click",this.productValid.bind(this));
},
productTypeBind:function(){//绑定产品类别下拉列表数据 | Binding product type data
this.prodPack.selectedIndex = 0; //for IE after page refreshed
var o = this.prodType;
this.prodData.each(function(pair){
o.options.add(new Option(pair.key, pair.value.code));
});
},
productTypeChange:function(e){//产品类别下拉列表事件监听 | Eventlistener of product type
var o = this.prodPack;
o.length = 1;
o.selectedIndex = 0; //for IE after packing choosed the first
this.prodImg.writeAttribute("src",o[0].id);
var selected = this.prodType.selectedIndex;
if (selected!=0){
this.productPackBind(this.prodType[selected].text);
}
},
productPackBind:function(choosedValue){//绑定产品包装下拉列表数据 | Binding product package data
var o = this.prodPack;
$H(this.prodData.get(choosedValue).type).each(function(pair){
var newOption = new Option(pair.key, pair.value.packing);
newOption.id = pair.value.img;
o.options.add(newOption);
});
},
productPackChange:function(e){//产品包装下拉列表事件监听 | Eventlistener of product package
var o = this.prodPack;
this.prodImg.writeAttribute("src",o[o.selectedIndex].id);
},
productValid:function(){//产品验证 | validate product
var v1 = $F(this.prodDate).strip(), v2 = $F(this.prodPatch).strip();
if(v1!=""&&v2!=""){
if(this.prodPack.selectedIndex != 0){
var validAjax = new Ajax.Request(this.validDataUrl,{
method:"get",
parameters:"rnd="+Math.random(),
onCreate: function(){
this.validMsg.show();
}.bind(this),
onComplete:this._validProd.bind(this)
});
}else{
alert("请选择产品及包装!");
}
}else{
alert("请填好产品生产日期和产品批号!");
}
},
_validProd:function(oReq){//产品验证Ajax callback
this.validMsg.hide();
var v1 = this.prodType.getValue(), v2 = this.prodPack.getValue();
var v3 = $F(this.prodDate).strip(), v4 = $F(this.prodPatch).strip();
var imgUrl = this.prodPack[this.prodPack.selectedIndex].id;
//alert(v1+"n"+v2+"n"+v3+"n"+v4+"n"+imgUrl);
var prodBatchs = oreq.responseText.evalJSON()[this.validData];
var result=prodBatchs.any(function(a){
return (v3==a[1] && v4==a[0] && a[2].startsWith(v1) && v2==a[3]);
});
if(result){
this.prodImg.writeAttribute("src", imgUrl.split(".")[0] + "-valid.jpg");
}else{
this.prodImg.writeAttribute("src", "images/invalid.jpg");
};
}
}
document.observe("dom:loaded",function(){
var validOne = new ValidProduct(prodTypeData,"data/batchs_new2.txt","batchs","productType",
"productPack","prodate","probatch","credit-img","vaSubmit","ajaxsearch");
});

(0)

相关推荐

  • 表单提交时自动复制内容到剪贴板的js代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe

  • JS定义网页表单提交(submit)的方法

    本文实例讲述了JS定义网页表单提交(submit)的方法.分享给大家供大家参考.具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 <script> function saveInfo() { localStorage.setItem("name",$("#name").val()); } </script> <form id=register onSubmit="return saveInfo

  • Web表单提交之disabled问题js解决方法

    本文实例讲述了Web表单提交之disabled问题js解决方法.分享给大家供大家参考.具体分析如下: 例如,有如下表单 复制代码 代码如下: <form id="inputForm" action="shorttermrental.action" method="post">      <input name="pname" type="text" id="pname"

  • js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装

    前段时间写了一个 js数据验证.js email验证.js url验证.js长度验证.js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了. js代码 复制代码 代码如下: /** * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. * * @author wangzi6hao * @version 2.1 * @desc

  • 符合标准的js表单提交的代码

    复制代码 代码如下: <script language="javascript" type="text/javascript">          document.forms["form_name"].submit(); </script>

  • 基于JavaScript实现带数据验证和复选框的表单提交

    实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q

  • JavaScript判断表单提交时哪个radio按钮被选中的方法

    本文实例讲述了JavaScript判断表单提交时哪个radio按钮被选中的方法.分享给大家供大家参考.具体分析如下: 这里的表单提交时通过JavaScript判断哪个radio按钮被选中了 <script type="text/javascript"> function findButton() { var myForm = document.forms.animalForm; var i; for(i=0;i<myForm.marsupial.length; i++

  • javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type="submit"的按钮,回车键生效. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=bu

  • 如何使用JavaScript和正则表达式进行数据验证

    数据验证是网络应用软件从客户端接受数据的重要步骤,毕竟,您需要在使用客户数据前确保其符合预期的格式.在网络应用程序中,您可以选择使用特定平台的工具,比如ASP.NET.JSP等等,或者您可以利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作. 正则表达式 正则表达式是一种模式匹配的工具,它允许您以文字方式来表述模式,因而正则表达式成为了一个验证文本数据的强大工具.除了模式匹配之外,正则表达式还可以用于文字替换.从我在UNIX系统上使用Perl时第一次接

  • 可实现多表单提交的javascript函数

    <script language=javascript> function submitForm(formId,action){     var form=document.getElementById(formId);     form.action=action;     form.submit(); } </script> 传个表单ID和url进去就行了~

  • asp.net中JavaScript数据验证实现代码

    今天在做一个数据修改的页面,页面上有一个DropDownList控件,绑定的是实体中的重要属性,我希望用户在修改该控件值的时候,提示用户,他修改了该控件的值.所以为该下拉控件加上了如下语句. 复制代码 代码如下: DDLmaterial.Attributes.Add("onchange", "alert('注意:您修改了物品类型!')"); 似乎不错,不仅有提示效果,也不需要刷新页面.可是当我打开页面进行测试的时候就发现了问题,当我把下拉控件的值改回原值的时候,它还

随机推荐