可编辑的表格(续集):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,看看效果吧。

计算机