之前我寫了一篇關于用jQuery+PHP實現實時(shí)編輯表格字段內(nèi)容文章，通(tōng)過實例一步步講解了實現過程，但(dàn)是還(hái)有(yǒu)一個(gè)問題，就是如何驗證重新編輯的字段內(nèi)容的有(yǒu)效性，如郵箱地址是否符合規範等。本文将對此問題做(zuò)出解答(dá)。

讀過本站(zhàn)可(kě)編輯的表格：jQuery+PHP實現實時(shí)編輯表格字段內(nèi)容一文的朋友(yǒu)應該知道(dào)jeditable提供了select，textarea類型的編輯，并提供第三方插件api接口。我在該文中也講解了如何接入jquery ui的datepicker日曆插件。那(nà)麽今天我們也以接口接入的方式，以驗證郵箱和(hé)手機号碼為(wèi)例，講解使用過程。

接口接入的代碼先要指定接入類型，如datepicker,email,mobile等，當然類型的名稱可(kě)以自己取。先看接入驗證郵箱的代碼：

//驗證E-mail
$.editable.addInputType("email", {
    element : function(settings, original) {
        var input = $("");
        $(this).append(input);
        return(input);
    },
    submit: function (settings, original) {
		var value = $("input").val();
		if(value==""){
			$(this).append("
不能為(wèi)空(kōng)！").css("color","red");
			return false;
		}
        var preg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;
        if (!preg.test(value)) {
			$(this).append("
請(qǐng)輸入正确的email地址！").css("color","red");
            return false;
        }
    }
});

我們先指定需要驗證的元素element為(wèi)一個(gè)輸入框input，然後在輸入完內(nèi)容提交時(shí)的submit裏進行(xíng)驗證，先驗證不能為(wèi)空(kōng)，然後對輸入的email進行(xíng)正則比對，如果輸入的格式不符合郵箱的格式則輸出錯誤提示信息。

調用驗證的方法隻需指定類型：type為(wèi)email即可(kě)，如:

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

這樣就完成了對email的驗證。同理(lǐ)，對手機号碼的驗證采用同樣的代碼格式：

//驗證手機号碼
$.editable.addInputType("mobile", {
    element : function(settings, original) {
        var input = $("");
        $(this).append(input);
        return(input);
    },
    submit: function (settings, original) {
		var value = $("input").val();
		if(value==""){
			$(this).append("
不能為(wèi)空(kōng)！").css("color","red");
			return false;
		}
        var preg = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
        if (!preg.test(value)) {
			$(this).append("
請(qǐng)輸入正确的手機号碼！").css("color","red");
            return false;
        }
    }
});

不難看出，隻需改變驗證類型和(hé)驗證的正則表達式，就可(kě)以完成對相應的輸入字段的驗證。如此，我們可(kě)以依葫蘆畫(huà)瓢，舉一反三，實現對URL、身份證号碼、郵政編碼等等的驗證。好了，現在可(kě)以查看演示DEMO，看看效果吧(ba)。