Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

コメントの名前などを必須項目に、パスワードの最低文字数を指定

必須アラート

 FC2ブログのコメントフォームの指定した項目(名前・タイトル・URL・メール・コメント本文・パスワード)を必須にするスクリプトです。パスワードは最低文字数も指定します。


設置方法

 デフォルトでは名前とコメント本文を必須項目とし、パスワードを入力した際は4文字を最低文字数とします。

 変更箇所はコメントフォーム部分です。コメントエリアとコメント編集エリアの2か所です。


( 1 ) テンプレートHTML内を「<!--comment_area-->」で検索します(ctrl+Fキー)。見つかったら、その直前に次のコードAを入れます。見つからない場合はhead内やbody内の適当な位置に入れます。

<!--comment_area-->


( 2 ) <!--comment_area-->の少し下に次のようなコードを発見できます。(nameやidなどはテンプレートによって異なります。「comment_form」などに書き換える必要ありません)

<form action="./" method="post" name="comment_form" id="comment_form">

 formの後ろに「 onsubmit="return commentCheck('comment')"」を追加します。

<form onsubmit="return commentCheck('comment')" action="./" method="post" name="comment_form" id="comment_form">

 formが見つからない場合は、テンプレートHTML内を「comment[no]」で検索します(ctrl+Fキー)。その少し前にあります。


( 3 ) 次にテンプレートHTML内を「edit[rno]」で検索します(ctrl+Fキー)。見つかったら、その少し前に先と同じようなコードを発見できます。

<form action="./" method="post" name="comment_form" id="comment_form">

 formの後ろに「 onsubmit="return commentCheck('edit')"」を追加します。

<form onsubmit="return commentCheck('edit')" action="./" method="post" name="comment_form" id="comment_form">

 以上で完了です。正常に動作しないときはコードAをhead要素内やbody要素内の適当な位置に移動させます。

 あとは送信ボタンの近くに「名前・タイトルは必須です。パスワードは4文字以上ご入力ください。」などとテキストを表示するといいかもしれません。

必須項目の変更

 変更する箇所はコードAの var c= 部分です。

var c=[[ 'name','名前' ],[ 'body','コメント' ]];

 タイトルを必須項目とする場合は [ 'title','タイトル' ] を追加します。

var c=[[ 'name','名前' ],[ 'body','コメント' ],[ 'title','タイトル' ]];

 パスワードを必須項目とする場合は [ 'pass','パスワード' ] を追加します。

var c=[[ 'name','名前' ],[ 'body','コメント' ],[ 'pass','パスワード' ]];

 URLを必須項目とする場合は [ 'url','URL' ] を追加します。

var c=[[ 'name','名前' ],[ 'body','コメント' ],[ 'url','URL' ]];

 メールを必須項目とする場合は [ 'mail','メール' ] を追加します。

var c=[[ 'name','名前' ],[ 'body','コメント' ],[ 'mail','メール' ]];

※先頭以外に追加するときはあいだに「,」を入れます。

 名前のみ必須。

var c=[[ 'name','名前' ]];

 タイトルのみ必須。

var c=[[ 'title','タイトル' ]];

 パスワードのみ必須。

var c=[[ 'pass','パスワード' ]];
パスワードの最低文字数の変更・削除

 最低文字数を変更する場合は 4 の数値を変更します。数値を増やすと最低文字数が増加します。

if(p&&ls<0&&p.value!=''&&p.value.length<5)z=m;
var m='パスワードは5文字以上必要です。';

 文字数を指定しない場合は次の3行を削除します。

var m='パスワードは4文字以上必要です。';
 var p=d.getElementsByName(e+'[pass]')[0];
 if(p&&ls<0&&p.value!=''&&p.value.length<4)z=m;
最低文字数の指定+数字・英字のみのパスワードを指定できないように
 var m='パスワードは4文字以上必要です。';

 「\n」を追加。

 var m='パスワードは4文字以上必要です。\n';
 if(p&&ls<0&&p.value!=''&&p.value.length<4)z=m;

 上記を下記に変更。

 if(p&&ls<0){
  if(p.value!=''&&p.value.length<4)z=m;
  if(/^[0-9]+$/.test(p.value))z+='数字のみのパスワードはご指定できません。';
 }

 英字のみも含める場合はさらに3行目を変更します。

if(/^([0-9]+|[a-zA-Z]+)$/.test(p.value))z+='数字または英字のみのパスワードはご指定できません。';
数字・英字のみのパスワードを指定できないように

 最低文字数は指定しません。

 var m='パスワードは4文字以上必要です。';

 上記を削除。

 if(p&&ls<0&&p.value!=''&&p.value.length<4)z=m;

 上記を下記に変更。

 if(p&&ls<0&&/^[0-9]+$/.test(p.value))z='数字のみのパスワードはご指定できません。';

 英字のみも含める場合はさらに変更します。

 if(p&&ls<0&&/^([0-9]+|[a-zA-Z]+)$/.test(p.value))z='数字または英字のみのパスワードはご指定できません。';
アラートで表示するテキストの変更

 変更する箇所はコードAの var c= 部分です。

 各項目の[ ]内の右側が表示される項目名になります。

var c=[[ 'name','名前' ],[ 'title','タイトル' ]];

 あいだの文字と後半のテキストは y= 部分で指定します。

y=(x.length>0)?x.join('')+'が未入力です。\n'+z:z;

 パスワードの最低文字数テキストは var m= 部分で指定します。

var m='パスワードは4文字以上必要です。';

■サンプル

var c=[[ 'name','Name' ],[ 'title','Title' ]];

var m='パスワードは4文字以上ご指定ください。';

y=(x.length>0)?x.join(' , ')+' をご入力ください。\n'+z:z;

■表示結果
Name , Title をご入力ください。
パスワードは4文字以上ご指定ください。

アラートを表示しない

 アラートを表示しないときはコードAの alert(y); を削除します。

if(y.length>0){return false;}

 入力項目がそれほどたくさんあるわけではないので、送信ボタンの近くに「名前・タイトルは必須です。パスワードは4文字以上ご入力ください。」というようなテキストがあれば、いちいちアラートを表示する必要はないかもしれません。

アラートの代わりに未入力項目の線の色を変更する

 設置方法の( 1 ) のコードを丸ごと以下のコードに変更します。

 そして、送信ボタンの近くに「名前・タイトルは必須です。パスワードは4文字以上ご入力ください。」のようなテキストを入れます。

線の太さ・色の変更

 b= の部分を変更します。1pxが線の太さ、ee3300が線の色です。

b='1px #ee3300 solid';

b='1px #000000 solid';
必須項目の変更

 変更する箇所は var c= 部分です。

var c=['name','body'];

 タイトルを必須項目とする場合は 'title' を追加します。

var c=['name','body','title'];

 パスワードを必須項目とする場合は 'pass' を追加します。

var c=['name','body','pass'];

 URLを必須項目とする場合は 'url' を追加します。

var c=['name','body','url'];

 メールを必須項目とする場合は 'mail' を追加します。

var c=['name','body','mail'];

※先頭以外に追加するときは「,」を入れます。

 パスワードのみ必須。

var c=['pass'];

 タイトルのみ必須。

var c=['title'];
パスワードの最低文字数の変更・削除

 最低文字数を変更する場合は 4 の数値を変更します。数値を増やすと最低文字数が増加します。

if(p&&ls<0&&p.value!=''&&p.value.length<4){y=false;p.style.border=b;

 文字数を指定しない場合は次の3行を削除します。

 var p=d.getElementsByName(e+'[pass]')[0],ls=location.search.indexOf('rno=');
 if(p&&ls<0&&p.value!=''&&p.value.length<4){y=false;p.style.border=b;
 }else{p.removeAttribute('style');}
最低文字数の指定+数字・英字のみのパスワードを指定できないように
 if(p&&ls<0&&p.value!=''&&p.value.length<4){y=false;p.style.border=b;
 }else{p.removeAttribute('style');}

 上記を下記に変更。

 if(p&&ls<0){if(p.value!=''&&p.value.length<4||/^[0-9]+$/.test(p.value)){
 y=false;p.style.border=b;}else{p.removeAttribute('style');}}

 英字のみも含める場合はさらに1行目を変更します。

if(p&&ls<0){if(p.value!=''&&p.value.length<4||/^([0-9]+|[a-zA-Z]+)$/.test(p.value)){
数字・英字のみのパスワードを指定できないように

 最低文字数は指定しません。

 if(p&&ls<0&&p.value!=''&&p.value.length<4){y=false;p.style.border=b;
 }else{p.removeAttribute('style');}

 上記を下記に変更。

 if(p&&ls<0){if(/^[0-9]+$/.test(p.value)){
 y=false;p.style.border=b;}else{p.removeAttribute('style');}}

 英字のみも含める場合はさらに1行目を変更します。

if(p&&ls<0){if(/^([0-9]+|[a-zA-Z]+)$/.test(p.value)){

パスワードの最低文字数、数字・英字のみの制限

 入力項目は必須にしません。

 設置方法の( 1 ) のコードを丸ごと以下のコードに変更します。


パスワードの最低文字数の変更

 4 の数値を変更します。数値を増やすと最低文字数が増加します。

if(p&&ls<0&&p.value!=''&&p.value.length<4){
アラートで表示するテキストの変更・表示しない

 alert('');内のテキストを変更します。

alert('パスワードは4文字以上ご指定ください。');

アラートを表示しない場合は次の行を削除します。

alert('パスワードは4文字以上ご指定ください。');
アラートの代わりに線の色を変更する
alert('パスワードは4文字以上ご指定ください。');

上記を以下に変更します。

p.style.border='1px #ee3300 solid';

 1pxが線の太さ、ee3300が線の色です。

最低文字数の指定+数字・英字のみのパスワードを指定できないように
 if(p&&ls<0&&p.value!=''&&p.value.length<4){
  alert('パスワードは4文字以上ご指定ください。');
  return false;}

 上記を下記に変更。

 if(p&&ls<0){var z='';
  if(p.value!=''&&p.value.length<4)z='パスワードは4文字以上ご指定ください。\n';
  if(/^[0-9]+$/.test(p.value))z+='数字のみのパスワードはご指定できません。';
  if(z!=''){alert(z);return false;}
 }

 英字のみも含める場合はさらに3行目を変更します。

if(/^([0-9]+|[a-zA-Z]+)$/.test(p.value))z+='数字または英字のみのパスワードはご指定できません。';
数字・英字のみのパスワードを指定できないように
 if(p&&ls<0&&p.value!=''&&p.value.length<4){
  alert('パスワードは4文字以上ご指定ください。');

 上記を下記に変更。

 if(p&&ls<0&&/^[0-9]+$/.test(p.value)){
  alert('数字のみのパスワードはご指定できません。');

 英字のみも含める場合はさらに変更します。

 if(p&&ls<0&&/^([0-9]+|[a-zA-Z]+)$/.test(p.value)){
  alert('数字または英字のみのパスワードはご指定できません。');

更新履歴など

 コメント本文が空欄の場合はページ遷移後にFC2側のアラートが表示されますが、ページ遷移せずに警告を表示した方がいいような気がするので、デフォルトの必須項目にコメントを加えています。

 scriptを外部ファイルに入れるときは、「<!--」と「-->」内のコードをjsファイルに追加します。

関連記事

トラックバック

http://paro2day.blog122.fc2.com/tb.php/636-043f0c7b

  1. trackback