jQuery_jquery に基づくフロントエンド データ用のユニバーサル検証ライブラリ

そこで、以前の開発をゆっくりと要約し始め、よりシンプルにして、より多くの検証を完了するために記述するコードの量を減らすためにいくつかの散在するメソッドも書きました。以前の考え方は、パラメータを渡し、検証するコントロールの ID を渡し、データ形式を検証する場合は対応する正規表現を渡すというものでした。プロジェクトが完了した後、プロジェクト全体を要約すると、この書き方ではあまりコードが節約されないことがわかり、学生からは私の書いたライブラリがあまり役に立たなかったという説明がありましたが、多くの場所で報告を受けました。また、まだよく理解できていませんし、すぐに始めることもできませんし、バグもまだたくさんあるはずなので、多くの場所では、各コントロールを 1 つずつ検証する方法を使用したいと考えています。 JS ファイルは 2 ～ 300 行あり、コメントも 1 文しか書けないので、問題が発生した後のメンテナンスが非常に面倒です。 JSのデバッグ。
最近出張に行っているので、以前のものをベースにさらにカプセル化して呼び出しをもっと便利にできないか考えていました。呼び出し時に JS コードを書かないのが最善です。 。私は jQuery の強力なセレクターについて考え、検証を行うとき、またはページから値を取得する必要があるときに、ページ要素にいくつかのカスタム属性を追加することがよくありました。したがって、検証を実行する場合は、要素にいくつかのカスタム属性を追加して JS コードを呼び出すだけで済みます。これが最も簡単です。
この単純な検証ライブラリは、フォーカスが失われたときの検証や送信ボタンがクリックされたときの検証を含む、基本的な検証の 90% を完了できるはずです。バックエンドに関して私にできることは何もありません。バックエンドを使用する人のためにそれを書くことしかできません:)。
呼び出しコードから始めましょう。JS コードは小さすぎるため、直接投稿しません。記事の最後に、私が以前に作成した JS ファイルも含まれています。 Renren.com を模倣するプラグインの場合。

コードをコピー コードは次のとおりです:

例: :
電子メールを空にすることもできますが、電子メールを入力すると、その電子メールは合法である必要があります。空が許可され、空の値が true に割り当てられている場合、検証ライブラリは空でない検証を実行しません。 false の場合、または空の属性でデフォルトが追加されない場合は、空にすることができないことを意味します。 空にすることができない場合は、emptyErrorMsg 属性を追加して、空の場合にエラー メッセージを表示します。空でない場合は、赤い「*」が表示されます。この属性の値が表示されます。次に、電子メールを検証するための形式の検証が行われます。validata の値が不正な場合は、errorMsg が欠落しているか空の場合、エラー メッセージが表示されます。
validata の値は完全にカスタマイズできません。JS でカスタマイズされています。これは、validata の値に基づいて異なる正規表現を返すことです。メソッドは以下の通りで、オプションのvaliddataの値は以下のメソッドのregNameの値となります。ユーザーがそれを表示したい場合は、他の式を追加するだけです。

コードをコピー コードは次のとおりです:

//検証内容に応じて対応する正規表現を返す
function returnRegString(regName) {
if (regName == "email") {
return "^([ a- zA-Z0-9_.-]) @(([a-zA-Z0-9-]) .) ([a-zA-Z0-9]{2,4}) $"; //メール
} else if (regName == "tel") {
return "^(86)?(-)?(0[0-9]{2,3})?(-)?([0- 9] {7,8})(-)?([0-9]{3,5})?$"; //電話
} else if (regName == "電話") {
return "^ (13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; //携帯電話
} else if (regName == "郵便番号") {
return "^([0-9]{6})$"; //郵便番号
} else if (regName == "number") {
return "^(0 | ([1-9] [0-9]*))(.[0-9] )?$"; //数値
} else if (regName == "10 進数") {
return " ^ [0-9] ([.][0-9] )?$"; //浮動小数点
} else if (regName == "money") {
return "^([0-9 ] )$"; //通貨
} else if (regName == "ウェブサイト") { //ウェブサイト
return "(http://|https://){0,1}[w/ . ?&=] ";
} else if (regName == "fax") { //Fax
return "^[ ]{0,1}([0-9]){1,3} [ ]?([-]?(([0-9])|[ ]){1,12}) $";
} else if (regName == "int") { //Integer
return "^(-){0,1}d $";
} else if (regName == "pInt") { //正の整数
return "^d $"; else if ( regName == "nInt") { //負の整数
return "^-d $";
} else if (regName == "nandl") { //数字と文字
return "[ a -zA-Z0-9]";
} else if (regName == "chinese") { //中国語の文字が含まれているかどうか
return "[u4e00-u9fa5]";
}
}

これ以上ナンセンスではありません。検証ライブラリはまだ完全にテストされていません。試してみたい場合は、問題や他の改善方法を見つけたらお知らせください。 。既製の比較的成熟した JS 検証ライブラリがあるはずですが、自分で作成したいと考えています。もう一度スクリーンショットを撮りましょう。ボタンが検証に合格しなかった場合、ポップアップ レイヤーは検証に合格していない場所を表示します。 ポップアップ レイヤーは、以前 Renren のエフェクトを模倣するために作成したポップアップ レイヤーのエフェクトです。 。