Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

簡単なFormチェック用のスクリプトを用意してみました。HTML側のコールはonSubmitのみ。各処理をできるだけサブルーチン化して、必要に応じて呼び分ける方式で記述してます。

name属性の使い方を工夫すれば、使うFormが増えても、大元ののコール関数は一個で十分かもしれない！

名前

本文

Email

トラックバック

ソースは以下

HTML

1. <form action="" method="post" id="check" onsubmit="return formCheck(this);">
2. <dl>
3. <dt>名前</dt>
4. <dd><input type="text" size="30" value="" name="name" /></dd>
5. <dt>本文</dt>
6. <dd><textarea cols="30" rows="10" name="body"></textarea></dd>
7. <dt>Email</dt>
8. <dd><input type="text" size="30" value="" name="mail" /></dd>
9. <dt>トラックバック</dt>
10. <dd><textarea cols="30" rows="10" name="track"></textarea></dd>
11. </dl>
12. <p><input type="submit" value="送信" /></p>
13. </form>

Script (コール関数)

1. function formCheck(form) {
2. // 入力チェック
3. if(!chNull(form.name, '名前')) return false;
4. if(!chNull(form.body, '本文')) return false;
5. // 文字数チェック
6. if(!chNum(form.name,3,25, '名前')) return false;
7. // 半角チェック
8. if(!chHalf(form.mail, 'Email')) return false;
9. // アドレスチェック
10. if(!chMail(form.mail, 'Email')) return false;
11. // URLチェック
12. if(!chURL(form.track, 'トラックバック')) return false;
13. return true;
14. }
15.  
16. var email = /[\w\.\-.\_]+@([\w\-]+\.)+[\w]+/ig;
17. var http_url = /s?https?:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/ig;
18. var ftp_url = /ftp:\/\/[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#]+/ig;

Script (入力チェック)

1. function chNull(obj,msg) {
2. if(!obj) return true;
3.  
4. if(obj.value=="") {
5. window.alert(msg+'が入力されていません');
6. obj.focus();
7. return false;
8. }
9. return true;
10. }

Script (文字数チェック)

1. function chNum(obj,min,max,msg) {
2. if(!obj) return true;
3.  
4. var num = obj.value.length;
5. var brw = navigator.appName;
6.  
7. if(num < min) {
8. window.alert(msg + 'は' + min + '文字以上で入力してください')
9. obj.focus();
10. return false;
11. }
12. if(num > max) {
13. window.alert(msg + 'は' + max + '文字以下で入力してください')
14. obj.focus();
15. return false;
16. }
17.  
18. return true;
19. }

Script (半角チェック)

1. function chHalf(obj,msg){
2. if(!obj) return true;
3.  
4. var str = obj.value;
5. for (var i=0; i<str.length; i++) {
6. /* 1文字ずつ文字コードをエスケープし、その長さが4文字未満なら半角 */
7. var len = escape(str.charAt(i)).length;
8. if (len >= 4){
9. window.alert(msg + 'に全角文字が含まれています');
10. obj.focus();
11. return false;
12. }
13. return true;
14. }

Script (mailチェック)

1. function chMail(obj,msg) {
2. if(!obj) return true;
3.  
4. var adr = obj.value;
5. if(adr=="") return true;
6. if(email.test(adr)==false) {
7. window.alert(msg + 'のアドレスが不正です');
8. obj.focus();
9. return false;
10. }
11. return true;
12. }

Script (URLチェック)

1. function chURL(obj,msg) {
2. if(!obj) return true;
3.  
4. var url = obj.value;
5. if(url=="") return true;
6. if(http_url.test(url)==false) {
7. window.alert(msg + 'のURLが不正です');
8. obj.focus();
9. return false;
10. }
11. return true;
12. }

2006.08.26 : 各サブルーチンに、そもそも「オブジェクトが存在するか」の確認を追加。これでコール関数にnameを追加するだけでチェック項目を追加できる。