私の意図は、アルゴリズムの設計、パフォーマンス、およびクロスブラウザーの互換性に関して、以下のスクリプトについてのあなたの考えと批判を得ることです.
私は JavaScript を使い始めたばかりで、長い間その素晴らしさを見逃していました。私のバックグラウンドと経験は、C/C++/PHP ベースの RESTful バックエンドの開発です。
言語とその正しい使い方を理解するために、私はこれまでに何度もやったことがあるはずのことをすることにしました。しかし、新しい言語とパラダイムを使用することを学ぶことは、とにかく苦痛を伴うことがよくあります.
これは、通常のフォーム処理および検証スクリプト/関数を作成する私の試みです。複雑さを軽減し、コードをシンプル/クリーンに保つために、HTML5 カスタム データ属性 (data-*) を使用して、フォーム内の各要素にメタデータを割り当てることにしました。
データ必須: 真または偽。true に設定すると、このパラメーターはフォーム フィールドを必須にするため、空にすることはできません。false に設定された値は、フィールドがオプションであることを示します。デフォルトは false です。 >
Data-Type: 実行する検証のタイプ。例には、「email」、「password」、「numbers」、またはその他の「regexp」が含まれます。
そのようなフォームの非常に単純な例は次のとおりです。
<form action="postlistings" id="postlistings" enctype='multipart/form-data' method="post" class="postlistings">
<ul class="login-li">
<li>
<input class="title" name="title" type="title" id="title" data-required="true" data-type="title"></a>
</li>
<li>
<textarea name="body" id="elm1" class="elm1" name="elm1" data-type="body" data-required="true" >
</textarea>
</li>
<li>
<span class="nav-btn-question">Add Listing</span>
</li>
</ul>
</form>
注意: これは私の最初の JavaScript コードです。アイデアは、フォーム名を渡して Form を呼び出し、パフォーマンスのために 1 つのループですべてのフィールド値を取得して検証することです。上記の Data-* 属性から推測できるように、検証には 2 つの手順が含まれます。
私。必須フォーム フィールドを確認します。
値がステップ 1 の要件を満たしていない場合、構成からのエラー メッセージが特定のフォーム値に対して取得されます。したがって、この要件を満たさないすべての値について、一連のエラー メッセージが収集され、ビューに渡されます。
ii. それぞれの検証を実行します。
検証は、すべての値がステップ 1 に合格した場合にのみ実行されます。それ以外の場合は、上記の 1 と同じステップに従います。
function Form(){
var args = Array.prototype.slice.call(arguments),
formName = args[0],
callback = args.pop(),
userError = [{type: {}, param: {}}],
requiredDataParam = 'required',
typeDataParam = 'type',
form = document.forms[formName],
formLength = form.length || null,
formElement = {id: {}, name: {}, value: {}, required: {}, type: {}};
function getFormElements(){
var num = 0;
var emptyContent = false;
for (var i = 0; i < formLength; i += 1) {
var formField = form[i];
formElement.id[i] = inArray('id', formField) ? formField.id : null;
formElement.name[i] = inArray('name', formField) ? formField.name : null;
formElement.value[i] = inArray('value', formField) ? formField.value : null;
formElement.required[i] = getDataAttribute(formField, requiredDataParam);
formElement.type[i] = getDataAttribute(formField, typeDataParam);
if (formElement.required[i] === true){
if(!formElement.type[i]) {
error('Validation rule not defined!');
}
else if (!formElement.value[i]) {
userError[num++] = {'type': 'required', 'param': form[i]};
emptyContent = true;
}
}
if (emptyContent === false) {
// Perform validations only if no empty but required form values were found.
// This is so that we can collect all the empty
// inputs and their corresponding error messages.
}
}
if (userError) {
// Return empty form errors and their corresponding error messages.
}
return formElement;
};
// Removed the getFormParam function that was not used at all.
return {
getFormElements: getFormElements
}
};
上記の JS スクリプトで使用される 2 つの外部関数 (JQuery ソースから):
var inArray = function(elem, array){
if (array.indexOf){
return array.indexOf(elem);
}
for (var i = 0, length = array.length; i < length; i++){
if (array[i] === elem){
return i;
}
}
return -1;
}
// This is a cross-platform way to retrieve HTML5 custom attributes.
// Source: JQuery
var getDataAttribute = function(elem, key, data) {
if (data === undefined && elem.nodeType === 1) {
data = elem.getAttribute("data-" + key);
if (typeof data === "string") {
data = data === "true" ? true :
data === "false" ? false :
data === "null" ? null :
!CheckType.isNaN ? parseFloat(data) :
CheckType.rbrace.test(data) ? parseJSON(data) :
data;
}
else {
data = undefined;
}
}
return data;
}
構成エラー メッセージの例は、次のように設定できます。
var errorMsgs = {
ERROR_email: "Please enter a valid email address.",
ERROR_password: "Your password must be at least 6 characters long. Please try another",
ERROR_user_exists: "The requested email address already exists. Please try again."
};
レビューのためにこれを投稿するので、私が従わなかった可能性のあるスタイリング規則は無視してください. 私の意図は、コード自体とアルゴリズムに関して、私が異なることを行うべきか、またはより良くできることについて、専門家のレビューを取得することです。
スタイリングの慣例に加えて、すべての批判と質問を歓迎します。