ValidationEngineã¨ã¯ã€Webページã®ãƒ•ã‚©ãƒ¼ãƒ ã§ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ï¼ˆå…¥åŠ›ãƒã‚§ãƒƒã‚¯ï¼‰ã‚’è¡Œã†ãŸã‚ã®jQueryプラグインã§ã™ã€‚
ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã¨ã¯ã€å…¥åŠ›ã•ã‚ŒãŸå€¤ãŒæ£ã—ã„ã‹ã©ã†ã‹ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã“ã¨ã§ã™ã€‚
例ãˆã°ã€é›»è©±ç•ªå·å…¥åŠ›æ¬„ã«ã€Œè¶³åˆ©å°Šæ°ã€ãªã©ã¨å…¥ã£ã¦ã„ã‚‹å ´åˆã¯ã‚¨ãƒ©ãƒ¼ã«ã™ã‚‹ãªã©ã€æ£ã—ã„å½¢å¼ã‹æ¤œè¨¼ã™ã‚‹å‡¦ç†ã§ã™ã€‚
ã“ã¨ãªã‚‹å½¢å¼ã®å€¤ãŒå…¥åŠ›ã•ã‚ŒãŸå ´åˆã¯ã€ãã®å…¥åŠ›æž ã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã‚’移動ã—ã€ãƒãƒƒãƒ—アップã§ã‚¨ãƒ©ãƒ¼ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ã‚’表示ã—ã¾ã™ã€‚
JavaScriptã§è¡Œã†å…¥åŠ›ãƒã‚§ãƒƒã‚¯ã¯ã€ã‚ãã¾ã§ã‚‚ユーザーã®æ“作性をå‘上ã•ã›ã‚‹ãŸã‚ã«ä½¿ç”¨ã—ã¾ã™ã€‚
JavaScriptã¯ãƒ–ラウザ上ã§å‹•ä½œã™ã‚‹ãƒ—ãƒã‚°ãƒ©ãƒ ãªã®ã§ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒä»»æ„ã§åˆ‡ã‚‹ã“ã¨ã‚‚å¯èƒ½ã§ã™ã€‚
ãã®ãŸã‚ã€ã“ã‚Œã ã‘ã§ã¯ã©ã‚“ãªå€¤ã§ã‚‚é€ä¿¡ã—ã¦ã—ã¾ã†ã“ã¨ãŒå‡ºæ¥ã¦ã—ã¾ã„ã¾ã™ã€‚
サーãƒãƒ¼ãƒ—ãƒã‚°ãƒ©ãƒ ã§ã‚‚å¿…ãšå…¥åŠ›ãƒã‚§ãƒƒã‚¯ã‚’è¡Œã„ã¾ã—ょã†ã€‚
下記サイトよりã€æœ€æ–°ã®ã€ŒformValidator.x.x.x.zipã€ã‚’ダウンãƒãƒ¼ãƒ‰ã—ã¦ãã ã•ã„。
Download
解å‡ã™ã‚‹ã¨ã€ä¸ã«demosã¨ã„ã†ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªãŒã‚ã‚Šã¾ã™ã€‚
ã“ã®ãƒ•ã‚¡ã‚¤ãƒ«ã«ã„ã‚ã„ã‚ãªã‚µãƒ³ãƒ—ルãŒã‚ã‚Šã¾ã™ã®ã§ã€ã“ã¡ã‚‰ã‚’å‚考ã«ã—ã¦ãã ã•ã„。
解å‡ã—ãŸä»¥ä¸‹ã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’èªè¾¼ã¿ã¾ã™ã€‚
js/jquery-1.7.2.min.js
js/jquery.validationEngine.js
js/languages/jquery.validationEngine-ja.js
css/validationEngine.jquery.css
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="js/languages/jquery.validationEngine-ja.js" type="text/javascript"></script>
ã“ã®ã‚ˆã†ãªæ„Ÿã˜ã§ã™ã€‚cssやスクリプトをå‚ç…§ã™ã‚‹ãƒ‘スã¯ã€ãƒ•ã‚¡ã‚¤ãƒ«ã‚’è¨ç½®ã—ãŸå€‹æ‰€ã«åˆã‚ã›ã¦å„自ã§å¤‰æ›´ã—ã¦ãã ã•ã„。
HTMLã§ãƒ•ã‚©ãƒ¼ãƒ ã‚’è¨ç½®ã—ã¦ã€ãã®IDをスクリプトã§å‚ç…§ã—ã¾ã™ã€‚
以下ã®ä¾‹ã§ã¯ã€ãƒ•ã‚©ãƒ¼ãƒ ã®IDを「formIDã€ã¨ã—ã¦ã„ã¾ã™ã€‚
Javascriptã®è¨˜è¿°ä¾‹
jQuery(document).ready(function(){
jQuery("#formID").validationEngine();
});
HTMLã®è¨˜è¿°ä¾‹
<form id="formID" method="post" action="">
~inputãªã©ï½ž
</form>
以上ã§ã€ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã¨æº–å‚™ã¯å®Œäº†ã§ã™ã€‚
è¨å®šã™ã‚‹ã«ã¯ã€classsã«ã€Œvalidate[ãƒãƒªãƒ‡ãƒ¼ãƒˆã®ç¨®é¡ž]ã€ã‚’記述ã—ã¾ã™ã€‚
例ãˆã°ã€input type="text" ã‚’å…¥åŠ›å¿…é ˆã«ã—ãŸã„å ´åˆã¯æ¬¡ã®ã‚ˆã†ã«æŒ‡å®šã—ã¾ã™ã€‚
<input value="" class="validate[required]" type="text" name="sample" />
ã“ã®ã‚ˆã†ã«è¨å®šã™ã‚‹ã“ã¨ã§æœªå…¥åŠ›æ™‚ã«ã¯ã€å…¥åŠ›æž 上ã«ã‚¨ãƒ©ãƒ¼ãƒ¡ãƒƒã‚»ãƒ¼ã‚¸ãŒãƒãƒƒãƒ—アップã§è¡¨ç¤ºã•ã‚Œã¾ã™ã€‚
テã‚ストボックスã ã‘ã§ãªãã€ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã€ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã€ãƒ—ルダウンãªã©ã§ã‚‚åŒæ§˜ã«æŒ‡å®šã§ãã¾ã™ã€‚
å…ˆã»ã©èª¬æ˜Žã—ã¾ã—ãŸãŒã€requiredを指定ã—ã¾ã™ã€‚
複数ã‚ã‚‹å…¥åŠ›æž ã®ä¸ã‹ã‚‰ã„ãšã‚Œã‹ä¸€ã¤ãŒå…¥åŠ›å¿…é ˆã®å ´åˆã¯ã€groupRequired[グループå]ã¨æŒ‡å®šã—ã¾ã™ã€‚
<input value="" class="validate[access]" type="text" name="tel" />
<input value="" class="validate[access]" type="text" name="mail" />
å½¢å¼ã®ãƒã‚§ãƒƒã‚¯ã§ã¯ã€custom[å½¢å¼å]ã¨æŒ‡å®šã—ã¾ã™ã€‚
æ—¢å˜ã®ã‚‚ã®ã‚’使用ã™ã‚‹ã ã‘ã§ãªãã€æ–°ãŸã«ç™»éŒ²ã™ã‚‹ã“ã¨ã‚‚出æ¥ã¾ã™ã€‚
phone : ãƒã‚¤ãƒ•ãƒ³ã‚’å«ã‚€20æ–‡å—以下ã®æ•°å€¤ã‹åˆ¤å®šã€‚
<input value="" class="validate[custom[phone]] text-input" type="text" name="sample" />
ãã®ä»–ã«ã‚‚下記ãªã©ãŒç”¨æ„ã•ã‚Œã¦ã„ã¾ã™ã€‚
email : ï¼ ãƒžãƒ¼ã‚¯ã‚’å«ã‚€ãƒ¡ãƒ¼ãƒ«ã‚¢ãƒ‰ãƒ¬ã‚¹å½¢å¼
url : httpã‚’å«ã‚€URL
integer : æ•´æ•°åŠè§’ã®ã¿
onlyNumberSp : åŠè§’æ•°å—ã®ã¿
onlyLetterSp : åŠè§’アルファベットã®ã¿
onlyLetterNumber : åŠè§’英数ã®ã¿
下記ã®ã‚ˆã†ã«åŠè§’カンマã§åŒºåˆ‡ã‚‹ã“ã¨ã§ã€åŒæ™‚ã«è¤‡æ•°ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã“ã¨ã‚‚å¯èƒ½ã§ã™ã€‚
<input value="" class="validate[required,custom[phone]] text-input" type="text" name="sample" />
メールアドレスやã€ãƒ‘スワードãªã©è¨˜è¿°ãƒŸã‚¹ã‚’防ããŸã‚ã«å†å…¥åŠ›æž ã‚’è¨ç½®ã™ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚
å†å…¥åŠ›ã«å…¥åŠ›ã•ã‚ŒãŸå€¤ãŒã€å…ƒã®å…¥åŠ›å€¤ã¨ä¸€è‡´ã™ã‚‹ã‹åˆ¤å®šã™ã‚‹ã«ã¯ã€equals[å…ƒã®å…¥åŠ›æž ã®idå]ã¨æŒ‡å®šã—ã¾ã™ã€‚
E-Mail:
<input value="" type="text" name="email" id="email" />
E-Mail(å†å…¥åŠ›ï¼‰:
<input value="" class="validate[equals[email]]" type="text" name="email_con" id="email_con" />