ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryフォームプラグインのformDdataパラメータ検証フォームとverification_jquery後の送信

jQueryフォームプラグインのformDdataパラメータ検証フォームとverification_jquery後の送信

WBOY
リリース: 2016-05-16 15:18:32
オリジナル
1526 人が閲覧しました

フォーム プラグイン API は、フォーム内のデータやフォーム送信プロセスを簡単に処理できるようにする多くの便利なメソッドを提供します。

テスト環境: Tomcat の Web プロジェクトにデプロイされます。

1. 依存する js を導入します

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
ログイン後にコピー

2. 初期化コールバック関数。

まず、フォームを初期化し、beforeSubmit コールバック関数を与えます。これは検証に使用される関数です。

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
ログイン後にコピー

3. 検証ルール

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; 
}
ログイン後にコピー

4. 詳細コード:




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 参数校验表单,验证后提交(简单验证).

名称:
地址:
自我介绍:

ログイン後にコピー

上記は、編集者が共有した jQuery フォーム プラグインの formDdata パラメーター検証フォームと、検証後に送信されたすべての内容です。皆様のお役に立てれば幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート