jQuery重写表单验证的方法 （四）

表单插件

表单插件（Form Plugin）是一款功能非常强大的插件，在jQuery官方网站上目前为4星级推荐，下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能，深受开发人员的喜爱。使用表单插件，再次重写“表单校验实例”，完整代码如下：

 
 
<form id="myform" action="action.asp">   
用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />   
输入密码:<input type="password" name="passwd1"><br />   
确认密码:</td><td><input type="password" name="passwd2"><br /><br />   
<input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">   
</form> 

HTML框架加了一个“检查”的按钮(使用手动校验的方法)，jQuery如下：

 
 
<script language="javascript" src="jquery.min.js"></script>   
<script language="javascript" src="jquery.form.js"></script>   
<script language="javascript">   
function startCheck(oInput){   
    //首先判断是否有输入，没有输入直接返回，并提示   
    if(!oInput.value){   
        oInput.focus(); //聚焦到用户名的输入框   
        document.getElementById("UserResult").innerHTML = "User cannot be empty.";   
        return;   
    }   
}   
$(function(){   
    $("input[type=button]").click(function(){   
        var options={   
            target: "#UserResult"   
        };   
        //表单的Ajax化   
        $("#myform").ajaxSubmit(options);   
    });   
});   
</script> 

必要说明：

1、使用表单插件，必须加载jquery.form.js文件。

2、按Ajax方式提交数据，可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用ajaxform(options)方法，通常在页面加载完成时执行，用来将表单统一Ajax化，并且提交表单依然使用传统的submit按钮，只不过进行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同。