东软实训（十九）

      一个好的界面，不仅要有好的创意，还要能够把好的创意实现出来，这样才能呈现在用户眼前。比如今天王总想到，我们做了每个页面的js验证，为什么不在输入后的每一项后面都增加一个小提示呢？脑补了一下有些网站的效果，十分华丽。然后我们想到了老师讲过的失去焦点onblur()方法，参数是文本框的id和span标签的id，当鼠标离开后响应，就是这个！我们尝试着写了一个，jsp中代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><input type="text" id="id4" οnblur="SingleCheck2('id4','sp4')"/><span id="sp4" class="input-notification png_bg"></span></span>

      还定义了一个总的js文件，里面有各种SingleCheck1,2,3..这样的函数：

<span style="font-family:Microsoft YaHei;font-size:14px;">function SingleCheck2(a,b)/*检测某个非必填项,适用于电话，传真*/{
	var sp=document.getElementById(b);
	
	if(checknotnull(a))/*非空*/{
		if(checkphone(a))/*电话号码格式正确*/{
			sp.className="input-notification success png_bg";
		}else{
			sp.className="input-notification error png_bg";
		}
	}else/*空,初始化类，避免之前已经被设成其他状态*/{
		sp.className="input-notification png_bg";
	}	
}</span>

      万万没想到，华丽丽的效果真的出现了！当时实在是太兴奋，感受到了当程序猿的快感哈哈！然后我们又往深想了想，把必填项和选填项的区分也直接用这个表示，文本框后面有蓝色叹号的就是必填项，不填或格式错误会显示红叉，正确会显示绿色对号，非必填项不填时什么也没有，填完也会显示绿色对号~我用了半个下午加晚上的时间把所有页面的验证都加好了，给自己一个大大的赞！下面是效果图：

（输入前）

（按要求输入后）

      在春风得意的同时，我们也遭遇了很多问题，基本也都找到办法解决了，但还剩一个最头痛的，也是困扰了我们好久的，就是这个日历..这个日历可算是个老大难，之前就因为和侧边栏不兼容搞的我头疼不已，现在的问题是：因为js我们选择了onblur这个方法，但日历是一个弹出窗口，当我们第一次选择后，onblur不会判断，第二次选择后才会响应，而判断的是应该第一次选择的日期！这显然是个bug！我们用onclick，onmouseout，onkeydown，onchange，onselect等各种方法试了，都不是我们想要的结果。想做出完美的效果还真是难。

      现在已经进入了项目的后期，每一个问题都不是容易解决的，解决错误需要的是锲而不舍的精神。今天解决不了就交给明天吧..God bless me！