自定义jQuery插件Validate的remote方法

Validate是一个非常好的jQuery表单验证插件，但它有个最让我头疼的地方就是它的remote方法。remote默认用get的方法获得一个json格式的返回信息，而公司用的是XML格式。修改remote的返回格式方法，我在网上找了很久都没有找到，没办法，最后只有自己解决，通过多次试验，终于解决了。在此抛砖引玉，如果大家有更好的方法，可以在这里留言。

这里以Validate的官方演示AJAX CAPTCHA做为例子来说明下。首先修改下process.php文件，原来的代码是

<?php
session_start();
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
	echo 'true';
else
	echo 'false';
?>

原来的代码输出的是json格式，现在改成XML格式的：

<?php
session_start();
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><isvalid><result>';
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
	echo 'true';
else
	echo 'false';
echo '</result></isvalid>';
?>

再改captcha.js文件，这里只例出需要修改的代码段：

remote: "process.php"

现在改成这样：

remote:{
    url:"process.php",
    data:{
        captcha:function(){
        	return $('#captcha').val();
        },
        website:'julabs'
    },
    dataType: "xml",
    success:function(response){
        var validator = $("#captchaform").data('validator');
        var element = $('#captcha').get(0);
        var previous = validator.previousValue(element);
        var valid = false;
        if($(response).find('result').text() === 'true') valid = true;
        if ( valid ) {
            var submitted = validator.formSubmitted;
            validator.prepareElement(element);
            validator.formSubmitted = submitted;
            validator.successList.push(element);
            validator.showErrors();
        } else {
            var errors = {};
            // response 换成 valid
            var message = (previous.message = valid || validator.defaultMessage( element, "remote" ));
            errors[element.name] = $.isFunction(message) ? message(value) : message;
            validator.showErrors(errors);
        }
        previous.valid = valid;
        validator.stopRequest(element, valid);
    }
}

上面例出的success方法中的大部分代码都是直接使用jquery.validate.js文件里的代码，你可以对照下jquery.validate.js文件。里面需要注意的是这几句代码：

//获得当前 form 的 validator 数据
var validator = $("#captchaform").data('validator');

//获得当前验证的元素，注意是 DOM 元素，而不是 jQuery 元素
var element = $('#captcha').get(0);

var previous = validator.previousValue(element);

var valid = false;
/**
 * 根据返回的xml内容来判断 valid 的值，
 * 判断语句可以根据具体情况进行修改
 * Ajax返回的信息格式为：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<isvalid>
	<result>false</result>
</isvalid>
*/
if($(response).find('result').text() === 'true') valid = true;

主要修改的就是上面列举的代码，我也写了注释来说明代码的作用。

今天也发现了一个不是问题的问题，如果Ajax的dataType设为xml时，而且在process.php文件中也没有加header('Content-Type: text/xml');代码，那么JS代码就不会执行success方法，这时候可以将dataType设为html就能正常执行了。看来jQuery可以判断返回内容的格式，还是要好好研究下jQuery的源代码。