JavaScriptとPHPを組み合わせてボタンを押してもリロードせずに実行させる「パスワード作成に使えるランダム文字列作成ツール」の作成方法の解説です。
ランダムな文字列を作るPHPファイルを用意
まずはphpファイルを別に用意します。
・test_java2.php
<?php
error_reporting(0);
mb_language("ja");
mb_internal_encoding('UTF-8');
$url=$_POST["data"];
$Lis=explode(",",$url);
$GetData=array();
$GetData["max"]=$Lis[0];
$GetData["len"]=$Lis[1];
$GetData["state01"]=$Lis[2];
$GetData["state02"]=$Lis[3];
$GetData["state04"]=$Lis[4];
$sml=array("a","b","c","d","e","f","g","h","i","j","e","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
$big=array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
$suj=array("0","1","2","3","4","5","6","7","8","9");
$datas="";
$lists=array();
$k=rand()%4;
$suu=rand();
//アルファベットの大文字
if($GetData["state01"]!=0)
{
$lists=array_merge($lists,$big);
}
//アルファベットの小文字
if($GetData["state02"]!=0)
{
$lists=array_merge($lists,$sml);
}
//数字
if($GetData["state04"]!=0)
{
$lists=array_merge($lists,$suj);
}
$m=count($lists);
for($n=0;$n<$GetData["len"];$n++)
{
$datas="";
for($i=0;$i<$GetData["max"];$i++)
{
$m=count($lists);
if($m!=0)
{
$suu=rand()%$m;
$datas.=$lists[$suu];
}
}
$datas.="\r\n";
echo htmlspecialchars($datas, ENT_QUOTES, 'UTF-8');
}
?>
このPHPファイルは$_POSTのパラメータによって組み合わせる文字の種類を切り替えます。
パラメータは”,”で区切られているのでexplode()関数を用いて分割します。
必要文字数、作成個数、アルファベットの大文字・小文字と数字のON/OFF順のパラメーターです。
このパラメータに合わせてランダム文字列は出力されます。
作成したらサーバーへアップロードしておきます。
JavaScriptとフォームを設定する
function sendRequest()
{
var xmlhttp=createXmlHttpRequest();
if(xmlhttp!=null)
{
var moji;
var sel=0;
moji = document.getElementById( "urlinput1" ).value;
moji+=","+document.getElementById( "urlinput2" ).value;
if(document.getElementById( "urlinput3" ).checked!=0) { moji+=",1"; }else{ moji+=",0"; }
if(document.getElementById( "urlinput4" ).checked!=0) { moji+=",1"; }else{ moji+=",0"; }
if(document.getElementById( "urlinput6" ).checked!=0) { moji+=",1"; }else{ moji+=",0"; }
xmlhttp.open("POST", "../test_java2.php", false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data="data="+moji;
xmlhttp.send(data);
var res=xmlhttp.responseText;
document.getElementById( "urloutput2" ).value = res;
}
}
送受信するデータはフォームから取得し、それをパラメータとして”,”で区切ってtest_java2.phpに送信します。
帰ってきた値はテキストエリアのurloutput2へ送ります。
<form name="FORMs" method="post">
ランダムで英数字の文字列を作成するツールです。
パスワード作成などにお役立て下さい。
<strong>①何文字の文字列を作成しますか？</strong>
<input type="text" name="max" id="urlinput1" maxlength="4" <?php echo 'value="'.$_POST["max"].'"';?>>
<strong>②何個作成しますか？</strong>
<input type="text" name="len" id="urlinput2" maxlength="4" <?php echo 'value="'.$_POST["len"].'"';?>>
<strong>③使用する文字列を決めて下さい</strong>
<input type="checkbox" name="state01" id="urlinput3" value="1" <?php if(isset($_POST["state01"])){ echo 'checked="checked"';}?>> アルファベットの大文字(ABCD...)
<input type="checkbox" name="state02" id="urlinput4" value="1" <?php if(isset($_POST["state02"])){ echo 'checked="checked"';}?>> アルファベットの小文字(abcd...)
<input type="checkbox" name="state04" id="urlinput6" value="1" <?php if(isset($_POST["state04"])){ echo 'checked="checked"';}?>> 数字(0-9)
<input type="button" name="botan" id="button01" onClick="sendRequest();" value="ランダム文字列作成">
<TEXTAREA id="urloutput2" name="moto" size="70" placeholder="ここに生成した文字を出力します。" style="width:100%;height:160px;" wrap="off"></TEXTAREA>
</form>
フォームには文字数、個数、アルファベットの大文字と小文字、数字を使うかを設定できるフォームになっています。
サンプル
[randm_pass01]
改善すべき点
これでパスワードが簡単に生成する事ができるようになりました。
後はこれに「!」や「@」のような特殊な文字を追加したり、アルファベットが先頭になるように等の機能が欲しい所です。
こう言った機能を追加するにはチェックボックスの有効・無効が切り替えられると便利なので、次回はこれを追加できるようにする解説します。
JavaScriptでフォームのボタンの有効と無効を切り替える方法