可编辑的表格(续集)：jQuery实现对所编辑内容的验证

之前我写了一篇关于用jQuery+PHP实现实时编辑表格字段内容文章，通过实例一步步讲解了实现过程，但是还有一个问题，就是如何验证重新编辑的字段内容的有效性，如邮箱地址是否符合规范等。本文将对此问题做出解答。

读过本站可编辑的表格：jQuery+PHP实现实时编辑表格字段内容一文的朋友应该知道jeditable提供了select，textarea类型的编辑，并提供第三方插件api接口。我在该文中也讲解了如何接入jquery ui的datepicker日历插件。那么今天我们也以接口接入的方式，以验证邮箱和手机号码为例，讲解使用过程。

接口接入的代码先要指定接入类型，如datepicker,email,mobile等，当然类型的名称可以自己取。先看接入验证邮箱的代码：

//验证E-mail
$.editable.addInputType("email", {
    element : function(settings, original) {
        var input = $("<input class="input" />");
        $(this).append(input);
        return(input);
    },
    submit: function (settings, original) {
		var value = $("input").val();
		if(value==""){
			$(this).append("<br/>不能为空！").css("color","red");
			return false;
		}
        var preg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
        if (!preg.test(value)) {
			$(this).append("<br/>请输入正确的email地址！").css("color","red");
            return false;
        }
    }
});

我们先指定需要验证的元素element为一个输入框input，然后在输入完内容提交时的submit里进行验证，先验证不能为空，然后对输入的email进行正则比对，如果输入的格式不符合邮箱的格式则输出错误提示信息。

调用验证的方法只需指定类型：type为email即可，如:

$(".edit_email").editable("save.php", { 
	type : "email",
});

这样就完成了对email的验证。同理，对手机号码的验证采用同样的代码格式：

//验证手机号码
$.editable.addInputType("mobile", {
    element : function(settings, original) {
        var input = $("<input class="input" />");
        $(this).append(input);
        return(input);
    },
    submit: function (settings, original) {
		var value = $("input").val();
		if(value==""){
			$(this).append("<br/>不能为空！").css("color","red");
			return false;
		}
        var preg = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
        if (!preg.test(value)) {
			$(this).append("<br/>请输入正确的手机号码！").css("color","red");
            return false;
        }
    }
});

不难看出，只需改变验证类型和验证的正则表达式，就可以完成对相应的输入字段的验证。如此，我们可以依葫芦画瓢，举一反三，实现对URL、身份证号码、邮政编码等等的验证。好了，现在可以查看演示DEMO，看看效果吧。