Home > Web Front-end > JS Tutorial > body text

jQuery form plug-in's formDdata parameter verification form and submission after verification_jquery

WBOY
Release: 2016-05-16 15:18:32
Original
1494 people have browsed it

The Form Plugin API provides many useful methods that allow you to easily handle the data in the form and the form submission process.

Test environment: deployed to web project in Tomcat.

1. Introduce dependent js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
Copy after login

2. Initialization callback function.

First, we initialize the form and give it a beforeSubmit callback function - this is a function used for validation.

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
Copy after login

3. Verification rules

function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}
Copy after login

4. Detailed code:




jQuery form插件的使用--用 formData 参数校验表单

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
 


Demo 5 :jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

名称:
地址:
自我介绍:

Copy after login

The above is the formDdata parameter verification form of the jQuery form plug-in that the editor shared with you and all the content submitted after verification. I hope it will be helpful to everyone.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template