js页面校验

        有这样的需求，在数据展示编辑的时候，当离开某一行数据的时候，提示上一行数据的编辑是否符合条件校验规则。普通的校验，很容易实现，使用正则表达式也好，其他方式，也好，但是如何将离开当前行数据进行校验呢？下面提供一种方案适合各种情况的校验。

       首先对各种可能的校验进行配置，这里需要一个数据库表，用来记录页面上需要校验的信息，字段有：当前页的id，用于区分不同页面或报表；需要校验的列名，校验的配置语句，可以为函数，也可以为SQL语句，用来按照列名进行校验，是否列校验（区分单列校验还是行校验），是否服务器端校验（区分服务器端参与校验还是客户端校验）；这样就可以把校验规则进行存放至数据库，然后在页面加载的时候，将这些规则加载到页面，对数据进行校验处理；

      下面是遇到的问题及解决办法，首先，是行校验的时机问题；我们使用的是普通的div布局，div不支持onblur、onfocus，所以没办法在div进行离开事件设置js处理函数。下面的方法可以让div具有onblur和onfocus属性，即使用tab属性，使任何标签具有该事件属性；什么标签具有tab呢？显然input和a是得天独厚的具有，我们经常用键盘上的tab键进行移动光标的时候，我们发现光标只在具有tab属性的元素上进行跳转。我们现在来让div拥有tab并具有onfucus和onblur属性！ 给元素创建tab属性：tabindex=参数(这里和z-index类似，计算tab起点)。

<div tabindex="0"
   hidefocus="true" onfocus='alert("得到焦点");' 
   onblur='alert("失去焦点");' 
   style="border:1px solid #ccc;width:200px;height:200px;outline=0;">
</div>

   另外，定义tab属性后，元素是默认会加上焦点虚线的，那么在IE中可以通过hidefocus="true"去除！其他浏览器通过 outline=0进行去除！width和height属性不是必要的，可以去除；onfocus、onblur事件均不能够冒泡，因此在IE中无法进行事件代理（IE只支持冒泡方式），而在chrome、firefox中则可以将处理函数绑定在事件捕捉阶段（即将addEventListener的最后一个参数设置为true）；这样可以解决div没有onblur属性的问题；

   其次：但是当离开表格的时候，如何判断是否离开当前行了还是在原来行，因为离开单元格会出现以下几种情况：离开单元格进入同行单元格、离开当前单元格进行其他行单元格，离开当前单元格进入除单元格的其他区域等；下面给出了一种解决方案，主要是使用以下两个对象：activeElment和srcElement ; activeElment指光标源所在的对象，是属于document的一个属性，如光标在页面的某个输入框里，判断当前光标的位置可用，document.activeElement 即可获得光标对象；srcElement 是鼠标触发事件的对象，event的一个属性。如鼠标点击，判断触发的对象，可采用event.srcElement 则获得该对象；注意这两个对象在不同浏览器稍有区别如：FF下 event.target获得；由此可以通过判断行数据的tr的id可以得知具体鼠标的移动方向了；在显示数据的时候，生成的行的tr_id跟数据的息息相关，如可以采用 表名_主键_k，k=0,1,2... ,这样通过判断activeElement.tr_id和srcElement . tr_id的不同区分是在行内和行间；通过activeElement.tr_id是否为空判断是否离开数据区域，完成数据的离开校验；上面的情况，通过在离开行的时候进行行校验，可以解决当用户在同一行反复写的导致的不必须的行校验，同时解决了数据区域最后一行无法前后对比tr_id校验的弊端；

然后就是对校验进行分类，涉及到数据类型校验、空校验、存在性，页面录入重复校验，归一性校验，唯一性校验、区间有效性校验等；这样根据业务的区别将校验规则放置数据库中，页面加载时载入页面完成对数据的有效性校验；

本文原创，转载注明来源 http://yuexiaodong.iteye.com