| |
表单前端校验是一个很常见的应用，有很多JavaScript的校验库可供选择。其中 Dexagogo 贡献的校验库我最为喜欢，在他的 Really easy field validation with Prototype 文章中依循链接可以下载或者查看demo。
该校验库基于 Prototype，并且以一种我一直推崇的 Unobtrusive 的方式将JavaScript脚本插入到页面中。
首先载入脚本：
<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>接着为表单控件设置class属性，属性名为预定义的(可扩展)的校验器名
<input class="required validate-number" id="field1" name="field1" />最后创建一个 Validation 对象，以表单id为构造函数的参数
<script type="text/javascript">
new Validation('form-id');
</script>使用相当的简单，最可贵的就是假如脚本未能加载成功或者浏览器端的脚本被禁用，原始的表单仍然可以按传统的方式进行提交(配合后台校验)，这可算是优雅的 Unobtrusive JavaScript 的又一个经典范例。
从 validation.js 里截取的一段源码看其实现机制：
......
Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
......由上代码可知该库注册了表单的 onsubmit 事件处理，当用户电击submit按钮的时候，校验被触发。
不过我在实际应用中遭遇了麻烦，因为我是用一个链接来模拟 submit 按钮的，链接的HTML类似如下代码：
<a href="javascript:$('form-id').submit()"> Submit </a>问题就在于，由JavaScript代码模拟的提交行为居然是不激发 onsubmit 事件的，这样设置的校验行为就被直接跳过了。
解决的方法有两种，第一种就是在JavaScript手工编写执行 onsubmit 事件处理器，如下：
<a href="javascript:doSubmit('form-id');"> Submit </a>
<script type="text/javascript">
function doSubmit(frm) {
var frm = $(frm);
if(frm.onsubmit()) {
frm.submit();
}
}
</script>可是以上的代码将报错，因为校验库中 onsubmit 事件是由addEventListener(mozilla)或者attachEvent(ie)的形式注册的，并没有以DOM Level 1的方式直接给表单对象设置 onsubmit 属性，所以，要让上面的代码生效，必须还要修改 validation.js 源码如下：
//Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
this.form.onsubmit = this.onSubmit.bind(this);经过如上的改动，校验可以生效了，不过这样的方式就显得不那么 Unobtrusive ，假如表单对象原来就定义了onsubmit事件处理，那么就还需要更多的代码来维护。
我想到的第二种方式，就是模拟出一个onsubmit事件来，先看如下的代码：
Object.extend(Validation,
fireSubmit: function(form) {
var form = $(form);
if (form.fireEvent) { //for ie
if(form.fireEvent('onsubmit'))
form.submit();
} else if (document.createEvent) { // for dom level 2
var evt = document.createEvent("HTMLEvents");
//true for can bubble, true for cancelable
evt.initEvent('submit', false, true);
form.dispatchEvent(evt);
}
}
);
function doSubmit(frm) {
Validation.fireSubmit(frm);
}我已经将这个 fireSubmit 方法定义为 Validation 对象的类方法，在 doSubmit 函数中调用。该方法主要应用了IE的 fireEvent 方法和DOM Level 2事件处理模型。
fireSubmit 方法在IE6-IE7b2和Firefox/Opera9b中测试通过(其实由JavaScript来提交表单本身就已经不 Unobtrusive 了，第二种方式只是尽量避免改动 validation.js 源码)。
需求促使我去了解更多W3C的规范，需要说明一下的就是document.createEvent方法的参数——也就是事件类型——目前共有三个可选值(键盘事件在W3C DOM 2中还未定义，另外据一些资料显示还有一个通用的"Events"选项值):
MouseEvent ： 鼠标事件
MutationEvent ： 文档结构变化事件
HTMLEvents ： HTML相关的事件，比如focus, load, submit等等
利用 W3C DOM 2 Event模型，我们还可以轻松的自定义事件类型，比如 Custom Javascript Events 中的范例。我在附件中还上传了一个简单的触发 MouseEvent 的demo，代码改自MSDN的例子。 |
|
