AJAX通用表单验证、无限级联动菜单和一个综合AJAX示例程序

Question

帮你找到了个错误http://www.robchen.cn/demo/selector/
页面中的JSON使用你就反复选择1级菜单的sport和it,发现什么了???你后面的3个select不能用了..................

Answer 1

@showbo
呃。。我反复测试了很多次，但是没发现你说的问题。。
在IE6,7、Firefox2、Opera9、Safari3下都测试过了。。不知道你那边的环境是什么样的？在什么情况下发生了错误?

Answer 2

借贵贴，发个贴列位：js牛人好！ 
            最近我在做一个通用表单验证的东东，因为以前没做过，暂时没什么思路，望有js牛人们指教1，2. 
          我暂时没有分了，抱歉。。 上一个版本中我是这么做的： 
          页面中为每一个表单加上不同的class，页面加载时将对应的校验函数绑定到该表单上。不知道大家是怎么做的望指教。。 
          致谢！

Answer 3

@changzhengxing
可以把你的实现贴出来大家交流交流  ^ ^

Answer 4

你可以去下面看截图
http://country.lvyou168.cn/aa.bmphttp://country.lvyou168.cn/bb.bmp

Answer 5

不好意思，大家要从下往上看哦。呵呵，个人习惯    /*********设置每一个input  Start**********/
var Checkers=function(el){
this.el=el;
this.checker=null;
this.creater();
};
Checkers.prototype={
creater:function(){
var oClassName=this.el.className;
var cnArr=oClassName.split(" ");
for(var i=0;i<cnArr.length;i++){
if(classNam_V_checkeFun[cnArr[i]])
this.checker=classNam_V_checkeFun[cnArr[i]];
};
if(!this.checker)return false;
this.el.checker=this.checker;
this.el.onblur=function(){
var R=this.checker.apply(this);
if(!R){
showMsg(this);
removeClass(this,"cInputclass-cc-3");
removeClass(this,"cInputclass-cc-2");
addClass(this,"cInputclass-cc-2");
}else{
hidMsg(this);
removeClass(this,"cInputclass-cc-3");
removeClass(this,"cInputclass-cc-2");
addClass(this,"cInputclass-cc-3");
}



};
this.el.onclick=function(){
inputOnclick.call(this);
}
}
}/*********设置每一个input  End**********/
//初始化每一个form.这是整个结构的入口点.
function setForm(fEl){
var inputs=fEl.getElementsByTagName("INPUT");
fEl.inputs=inputs;
for(var i=0;i<inputs.length;i++){
new Checkers(inputs[i]);
}
fEl.onsubmit=function(){
var inputs=this.inputs;
for(var i=0;i<inputs.length;i++){
if(!inputs[i].checker)continue;
var R=inputs[i].checker.apply(inputs[i],["form"]);
if (!R) {
showMsg(inputs[i]);
removeClass(inputs[i],"cInputclass-cc-3");
addClass(inputs[i], "cInputclass-cc-2");
alert(oMsg(inputs[i]));
inputs[i].focus();
return false;
}else{
hidMsg(inputs[i]);
removeClass(inputs[i],"cInputclass-cc-2");
addClass(inputs[i], "cInputclass-cc-3");
}
}
return true;
}
if(inputs.length!=0){
inputs[0].focus();
}
}
//设置window.onload
window.onload=function(){
var forms=document.forms;
for(var i=0;i<forms.length;i++){
setForm(forms[i]);
}
}

Answer 6

这里每一个classname和对应校验函数的对照表。形如：{'classA':oFunA,'classB':oFunB}

Answer 7

@showbo
- -!
我用傲游也没测试出这个问题。我的是1.5.9.。不知道你用的是什么版本？

Answer 8

@changzhengxing
我看了你的程序，我觉得有几点应该注意：
1. 事件句柄的注册，最好用observe模式，不然就等于独占了某个事件，在页面其他程序也需要使用这个事件时，就会发生冲突。
2. 你做到了验证规则的分离，但是在设计上我觉得应该是结构、样式、行为松耦合的，所以可以考虑抽象出一个验证器。
3. 程序中只看到了INPUT，还有其他的表单元素呢？例如SELECT？
4. 程序中在blur事件触发验证，一个更好的设计，是否可以让开发者按照需要自定义验证的事件，以更灵活更通用呢？
5. 当一个表单项已经被验证过了，如果这时候触发表单项的blur时间或者表单的submit事件，实际上会再次按照规则验证一次。其实可以指
    定一个状态来保存验证是否通过，以避免没必要的重复验证。
6. 我建议采用回调模式来代替hidMsg,showMsg,removeClass,addClass等等。因为我觉得验证就应该只关注验证本身，而其他的，提供接口
    支持就好了。这样实现也可以更加丰富，更易于扩展。
7. 一些小建议：
    7.1 循环的时候尽量避免在循环体内创建变量：比如:for(var i = 0;i < inputs.length; i ++){ var xxx = ...;}其实可以写成
    for(var i = 0,l = inputs.length,xxx; i < l; i ++){ xxx = ...;} 会更好一些。
    7.2 如果某个属性和方法在某个程序段内经常使用，可以考虑用局部变量包保存引用，比频繁的使用this.xxx要好。

Answer 9

@showbo
我升级到1.6.3 提示已经是最新版本了。。 - -!
测试也是正常的。。
不知道你的2.0是在哪里下的，可否给个地址？

Answer 10

@showbo
2.0试过了，正常的。。可能与你的浏览器具体设置有关。。

Answer 11

@iori_wen
奇怪，这个问题我这里IE6没有出现。变灰是因为在请求数据，请求完成后会变回来。

Answer 12

@showbo
js程序员有时候是比较苦，浏览器的差异总是很头疼，即使经验再丰富，也难说一定不出问题。
最近就被Mac上的Safari磨得够呛。
不过我不是专职js，只是对js比较有兴趣，写的多一点。

Answer 13

确实不错，最近我也喜欢上JS的
作界面功能作好用一点难用一点对于交差其实区别不大，只是
作为个人学习觉得好玩．
最近在学习JQUERY开发，感觉那框架很好用．
JSRE没用过有时间再研究研究．哈

Answer 14

@NULLJAVA
既然出现了问题肯定有原因，但我这里总是不出现，也不好分析原因。- -!

Answer 15

哦哦...几天没来了...可不可以发份源码看下呢[email protected] 谢谢!!!

Answer 16

哦哦...几天没来了....可不可以发份源码看下呢[email protected] 谢谢!!

Answer 17

需要源码请发邮件到[email protected]索取