入力フォームの入力チェック jQuery-Validation-Engine

入力フォームの入力チェック jQuery-Validation-Engine、説明画像1

jQuery-Validation-Engine をダウンロード

公開サイトの DownloadZip からZIPファイルをダウンロード

GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
jQuery form validation plugin. Contribute to posabsolute/jQuery-Validation-Engine development by creating an account on GitHub.

必要なファイル

    CSSファイル
    /css/validationEngine.jquery.css

    jQuery本体
    /js/jquery-1.8.2.min.js

    「jQuery-Validation-Engine」日本語化スクリプト
    /js/languages/jquery.validationEngine-ja.js


    「jQuery-Validation-Engine」本体
    /js/jquery.validationEngine.js

設置方法

1.jsとcssを読み込む

PHP


<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/languages/jquery.validationEngine-ja.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

2.フォームのidを指定する

[javascript] /* (例:if=”form_id”)の場合 */ [/javascript]

3.設定はクラスに記載する

入力必須チェック:

PHP


<input type="text" class="validate[required]">

PHP



必須メールチェック   validate[required,custom[email]]
必須じゃないメールチェック   validate[optional,custom[email]]



最小6文字入力チェック    validate[required,minSize[6]]
最大12文字入力ちぇく    validate[required,maxSize[12]]
最大と最小入力チェック   validate[required,minSize[6],maxSize[12]]

(※ここでの文字数の指定は、バイト数ではなく文字数なので、
  半角英字でも全角日本語でも、どちらでも1文字は1文字とカウントされます。)  


英字と空白のみの入力をチェック     validate[required,custom[onlyLetterSp]]



数字のみのチェック    validate[required,custom[number]]
数字と空白のみの入力をチェック    validate[required,custom[onlyNumberSp]]

数字チェック(小数点はエラー,マイナス符号はOK)    validate[required,custom[integer]]
数字チェック、小数点と31以上はエラー    validate[required,custom[integer],max[30]]



URLチェック(HTTP、HTTPS、FTPの3種類はOK)    validate[required,custom[url]]



電話番号チェック    validate[required,custom[phone]]



パスワードチェック
   1つめに   validate[required]
   2つめに   validate[required,equals[1つめのname]] 

PHP


 1つめ入力:
<input type="password" name="password1" id="password1"
 value="" class="validate[required]">
2つめ確認:
<input type="password" name="password2" id="password2"
 value="" class="validate[required,equals[password1]]">

バルーン内に表示されるエラーメッセージを修正する方法

jquery.validationEngine-ja.jsファイル内のソースを修正します。文字コードはUTF-8(BOMなし)

タイトルとURLをコピーしました