validationEngine は、フロントエンドのフォーム検証における多くの作業を軽減します。ほとんどの場合、validationEngine を使用していくつかの方法でフォームを検証します。
1 通常のフォーム送信を使用します。この場合、validationEngine が検証に失敗した場合、フォームは送信されません。
2 ajax を使用してフォームを送信しますが、ajax 検証は使用しないでください。
このメソッドも比較的単純で、ajax リクエストを使用する前に検証に合格したかどうかを確認するだけです。例:
//検証が失敗した場合に戻ります
If(!$("form#ajaxForm").validationEngine("validate")) return ;
$.ajax({
入力: 「POST」、
URL: $("#ajaxForm").attr("アクション"),
データ: $("#ajaxForm").serialize()、
データ型: "html"、
成功: function(data){
});
3 通常のフォームを使用して送信しますが、ajax 検証を使用します。この方法は、フォームを送信するときに、ajax 検証が通らなくてもフォームを送信できます。インターネットはソースコードを変更します。以下はスクリーンショットです:
。この方法は現在の状況では実行可能ですが、この変更方法自体は推奨されず、他の場所に影響を与える可能性があります。
If(window.console){
console.log("フォーム送信の検証に合格した後、Ajax 送信前のコールバック");
};
true を返します。
};
//
function ajaxValidationCallback(status,form,json,options){
If(window.console){
コンソール.ログ(ステータス);
};
If(ステータス === true){
alert("フォームは有効です!");
}
};
jQuery(ドキュメント).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, //フォームの送信に Ajax を使用するかどうか
ajaxFormValidationMethod: 'post', //Ajax が送信するときのデータ送信方法を設定します
onAjaxFormComplete: ajaxValidationCallback, //Ajax 検証が完了した後のフォーム送信
onBeforeAjaxFormValidation: beforeCall //フォーム送信の検証に合格した後、Ajax 送信前のコールバック
});
});
beforeCall このメソッドは呼び出されないため、まだ使用できません
4 ajax を使用して、ajax を使用してフォームを検証および送信します。この方法はわかりにくく、上記のソース コードを変更する方法は使いにくいです。
3 番目と 4 番目の方法の解決策は次のとおりです:
ajax 検証を使用するフォーム タグにカスタム属性 control="userName,email" を追加します。属性値は、ajax を使用して検証されるコントロールの ID です (複数のコントロールはカンマで区切られます)。
コードをコピーします
検証が必要な各コントロールに、url (ajax リクエストのアドレス) と error (失敗した場合のプロンプト メッセージ) の 2 つの属性を追加します
コードをコピーします
コードは次のとおりです:
JavaScript で 2 つのグローバル配列を宣言します
var controlId = new Array() //検証に失敗したコントロール ID を保存します
varerrors = new Array() //検証に失敗した場合のプロンプト メッセージを保存します
そのアイデアは、フォーム タグのコントロール属性の値を取得し (各コントロール ID をカンマで区切る)、ajax を使用してリクエストを走査し、検証が失敗した場合にコントロール ID とプロンプト情報を controlId に追加することです。およびエラー、およびプロンプト情報。フォームを送信するときに、controlId が空であるかどうかを確認します。空でない場合は、プロンプト情報がループで表示されます。
$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls")
//フォームが送信されたとき
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
false を返す ;
});
//フォーカスを失ったときにコントロールを検証します
valControls(ajaxForm2Controls);
});
フォーム送信方法:
コードをコピーします
コードは次のとおりです:
function ajaxForm2Control(obj) {
//エラーメッセージがある場合は戻り、エラーメッセージを表示します
If(controlId.length > 0) {
アラート情報()
false を返す ;
}
If(!$(obj).validationEngine("validate")) return false; // Ajax 検証を使用しないコントロールを検証します (Ajax 検証されていないフィールドは通常どおり検証でき、失敗した場合は返されます)
$.ajax({
入力: 「POST」、
URL: $(obj).attr("アクション")、
データ: $(obj).serialize()、
データ型: "html"、
成功: function(data){
}
});
}
フォーカス イベントをフォームに追加します
コードをコピー
コードは次のとおりです:
//
形式で検証する必要があるコントロール
関数 valControls(ajaxForm2Controls) {
//Ajax 検証が必要なコントロールを取得
var controlStr = ajaxForm2Controls.attr("コントロール");
//属性が未定義の場合にリターン
If(typeof(controlsStr) === "未定義" ||controlsStr.length
var コントロール = controlStr.split(/,/g) ;
for(コントロール内の変数 i) {
//フォーカス離脱イベントを追加
$("#" コントロール[i]).blur(function() {
If($(this).val().length
controlId.length = 0;
errors.length = 0;
//エラーメッセージ
var error = $(this).attr("error") ;
$.ajax({
入力: "GET"、
URL: $(this).attr("url"),
データ: $(this).serialize()、
データ型: "テキスト"、
成功: function(data){
If(data==="true") {
//検証が失敗した場合はエラーメッセージを配列に入れます
controlid.push（controls [i]）;
errors.push(error);
アラート情報()
});
}) ;
}
}
エラーメッセージ:
コードをコピー
コードは次のとおりです:
//ポップアップメッセージ
functionalertinfo() {
If(controlId.length > 0) {
for(controlId の変数 i) {
//validationEngine メソッドは、指定された ID のプロンプトをポップアップ表示します
// 使用法:$("#id").validationEngine("showPrompt","プロンプトコンテンツ","load");
//＆lt; Span style = ""＆gt;この要素にプロンプトを作成します
$("#" controlId[i]).validationEngine("showPrompt",errors[i], "error");
}
}
この方法では、3 番目または 4 番目の方法でフォームを送信するときに、送信する前に controlId を呼び出して値があるかどうかを確認するだけです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
