jQueryベースのフロントエンドデータ汎用検証ライブラリ
4338 ワード
そこで前の開発の中でゆっくりと総括を始めて、いくつかのばらばらな方法も書いて比較的に簡単で、もっと少ないコードを書いてもっと多くの検証を完成したいと思っています.以前はパラメータを渡し、検証するコントロールのIDを渡し、データフォーマットを検証して対応する正規表現に伝えるという考え方でした.プロジェクトが终わってから、プロジェクト全体をまとめると、この书き方もコード量をあまり节约していないことがわかりました.また、私が书いたライブラリはあまり使いにくいという学生の反応が多かったので、说明がありましたが、彼らもよく理解できず、すぐに手に入ることができませんでした.また、多くのバグがあるはずです.だから多くの地方はやはりあのようなコントロールに対して1つ1つ検証する方式を使うほうがましで、1つのJSファイルの中で検証する部分だけで2,300行のコードが必要で、その上すべて比較的に怠け者で、注釈に対して1つの文を少なく書くことができて1つの文で、そのため問題が発生した後に維持するのも面倒で、JSデバッグもまだ1つのとても便利なツールがありません.
最近も出張中なので、暇なときには、前のほうをもっとカプセル化して呼び出したほうが便利かなと思っています.呼び出しの時にJSコードを書かないほうがいいです.jQueryの強力なセレクタを思い出し、以前検証したときやページから値を取る必要があるときにページ要素にカスタム属性を加えることがよくあります.そこで、検証をしたいときは要素にいくつかのカスタム属性を加えてJSコードを呼び出せばいいのですが、これが一番簡単なのではないでしょうか.
この簡易な検証ライブラリは、フォーカスを失ったときの検証や、提出ボタンをクリックしたときの検証など、90%の基本検証を完了できるはずです.バックエンドのあれは私はすることができなくて、谁が使って谁が自分で书くことしかできません:).
先に1段の呼び出しのコードを先に行って、JSコードは少なくなったと言って、直接貼らないで、文章の後ろに添付ファイルをつけて、また1つの私の前に自分で書いた1つの擬人網のプラグインのJSファイルを含みます.
たとえば、メールボックスの :
メールボックスは にすることができますが、メールボックスを すると であることが されます. に されている 、emptyにtrueとして を り てると、 ライブラリは でない を いません.falseまたはemptyプロパティにデフォルトを けないと にはできません. にするにはemptyErrorMsgのプロパティを して、 の のエラー を することはできません.このプロパティが けているか、 が の は い「*」が され、 でない はこのプロパティの が されます. にフォーマットの を い、メールボックスの を い、validataの はemailであり、 でない は のカスタム errorMsgの を し、errorMsgが または の はエラー も 「*」である.
validataの はまだ にカスタマイズできないので、JSで しました.validataの に づいて なる を します.メソッドは のとおりです. に、オプションのvalidataの が、 のメソッドのregNameの です.ユーザーが の を すればいいです.
くだらないことは わないで、この もまだ なテストをしていません. さんたちが があれば、 か を つけたり、 のもっと い を えてください. で したJS ライブラリがあるに いありませんが、 で いておきたいと います.もう1 のスクリーンショットをしましょう.ボタンをクリックしたとき、 に しなかったら、ポップアップ はどこが に しなかったかを します.ポップアップ は が に いた のポップアップ です.
最近も出張中なので、暇なときには、前のほうをもっとカプセル化して呼び出したほうが便利かなと思っています.呼び出しの時にJSコードを書かないほうがいいです.jQueryの強力なセレクタを思い出し、以前検証したときやページから値を取る必要があるときにページ要素にカスタム属性を加えることがよくあります.そこで、検証をしたいときは要素にいくつかのカスタム属性を加えてJSコードを呼び出せばいいのですが、これが一番簡単なのではないでしょうか.
この簡易な検証ライブラリは、フォーカスを失ったときの検証や、提出ボタンをクリックしたときの検証など、90%の基本検証を完了できるはずです.バックエンドのあれは私はすることができなくて、谁が使って谁が自分で书くことしかできません:).
先に1段の呼び出しのコードを先に行って、JSコードは少なくなったと言って、直接貼らないで、文章の後ろに添付ファイルをつけて、また1つの私の前に自分で書いた1つの擬人網のプラグインのJSファイルを含みます.
たとえば、メールボックスの :
メールボックスは にすることができますが、メールボックスを すると であることが されます. に されている 、emptyにtrueとして を り てると、 ライブラリは でない を いません.falseまたはemptyプロパティにデフォルトを けないと にはできません. にするにはemptyErrorMsgのプロパティを して、 の のエラー を することはできません.このプロパティが けているか、 が の は い「*」が され、 でない はこのプロパティの が されます. にフォーマットの を い、メールボックスの を い、validataの はemailであり、 でない は のカスタム errorMsgの を し、errorMsgが または の はエラー も 「*」である.
validataの はまだ にカスタマイズできないので、JSで しました.validataの に づいて なる を します.メソッドは のとおりです. に、オプションのvalidataの が、 のメソッドの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 == "phone") {
return "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; //
} else if (regName == "postcode") {
return "^([0-9]{6})$"; //
} else if (regName == "number") {
return "^(0|([1-9]+[0-9]*))(.[0-9]+)?$"; //
} else if (regName == "decimal") {
return "^[0-9]+([.][0-9]+)?$"; //
} else if (regName == "money") {
return "^([0-9])$"; //
} else if (regName == "website") { //
return "(http://|https://){0,1}[\w\/\.\?\&\=]+";
} else if (regName == "fax") { //
return "^[+]{0,1}([0-9]){1,3}[ ]?([-]?(([0-9])|[ ]){1,12})+$";
} else if (regName == "int") { //
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 ライブラリがあるに いありませんが、 で いておきたいと います.もう1 のスクリーンショットをしましょう.ボタンをクリックしたとき、 に しなかったら、ポップアップ はどこが に しなかったかを します.ポップアップ は が に いた のポップアップ です.