表单插件
表单插件(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)的参数基本相同。