ただのSEの備忘録

技術からニュース、くだらない雑学まで何でもまとめるブログ

*

jqueryで各種非同期通信の際に便利な処理をプラグイン「vallidate.js」を開発しました。

   


scriptで非同期でのフォームの処理は、エンター無効、サジェスト、文字チェックなどscriptである程度制御しなければならず面倒です。

「enter無効/処理入れたい」、「入力空チェック/文字数制限を行いたい」、「入力後一定時間で関数実行させたい」を解決してくれるプラグインも無く、各所に同じ記述を書くことも。。

そこで、今回かゆいところに手が届くプラグインがないなら作ってしまおう!ということで「vallidate.js」を開発しました。

 

使い方の詳細は下の通りです。

【ダウンロード】

下記ダウンロードリンクより「vallidate.js」をダウンロード

vallidate-1.0.0

これを該当のファイルに読み込んでください。

このプラグインを動かすにはjQueryが必要なため、jQeryの読み込みも忘れずに。

http://jquery.com/

 

【使い方】

基本は「vallidate.~~」で呼び出すことが出来ます。

必要な変数はmap({key:value,key:value,..})で渡してください。

vallidate.jsで出来る事と使用例を書いていきます。

 


 /**
 * エンターでのsubmitを禁止
 * event:任意|エンター押下時に処理したいイベント
 */
 notEnterSubmit()

エンターの押下を無効化してくれます。任意でeventにfunction()を渡すことで、エンター押下時の処理もつけることが出来ます。

*用途は、フォーム内の入力項目を非同期で制御するときに使えます。

 


 /**
 * 入力が終わってから一定時間経った時に、イベントを走らせる
 * func:実行したいイベント
 * div:要素
 * time:任意|デフォルト:250|イベント実行までの時間(ms)
 * length:任意|何文字以上でイベント実行対象にするか
 * textcount:任意|デフォルト:true|文字数が変わったときのみイベントを実行するか
 */
 inputFixedTimeCount()

onkeyupなどのイベントではキーを押されるたびにイベントが走ってしまいますが、この関数では、入力が終わってから指定した時間で1回イベントが走ります。最後の入力から何ms経ったときにイベントを発火させるか、指定することもできます。

スポンサードリンク

divにはテキストフォームの要素のidかclass(例:”#hoge”)を渡します。

lengthは検索対象を何文字目からにするかも指定できます。リクエスト数の削減に有効です。

textcountはあまり使わないかもしれませんが、入力フォームの文字が変わらなくてもキーを押されたら実行したいとき、falseに設定します。

*用途は予測検索などに使うことが出来ます。

 


/**
* 一定時間経った時に、イベントを走らせる
* func:実行したいイベント
* time:任意|デフォルト:250|イベント実行までの時間(ms)
*/
fixedTimeCount()

ひとつ前は入力フォームに対してでしたが、こちらはそもそも特定のイベントを一定時間後に実行したいときに使用します。

callbackとあまり変わらないですね!

funcで実行したい関数を指定することが出来ます。

 


/**
* テキストのチェックを行います
* text:入力対照テキスト
* len:任意|デフォルト:null、空チェック|入力文字数判定
* restrictionType:任意|デフォルト:~以上かどうか判定|"less":~以下かどうか判定
* (lenに判定基準文字数を指定してください)
* success:成功したときに実行したい関数
* failed:任意|処理に引っかかったときに実行したいイベント
* (success,failedを指定しない場合にはtrue or falseを返却します)
*/
checkText()

最後が文字のチェック関数になります。

textでチェックしてもらいたい文字列を渡します。

lenはデフォルトは空チェック、入れると~文字以上、以下かどうか、判定を行ってくれます。

デフォルトは~以上かどうかを判定、restrictionTypeを指定することで、~文字以下かどうかを判定してくれます。

また、通常はif文などで使用できるようにtrue or falseを返却しますが、success、failedに関数を指定することで、簡潔に関数を呼び出すこともできます。

*用途はフォーム送信前の文字チェックで活用することが出来ます。

 

 

是非、script非同期処理でお役立てください。

イイネもお待ちしております^^

 - JavaScript/jQery