ランダム文字列生成(もっと細かく！)

前にもランダム文字列生成は考えましだが、今回は、もっと細かい条件を追加してます。

①頭文字が数字にならない
　　たまにありますよね・・・だめなとき。

②小文字英字, 大文字英字, 数字、全て含んでいる
　　最近、これが条件なこと増えてきましたよね。。。


何回もぽちぽちして生成すればいいやん！
ってところなんですが、わからない人もいるでしょう。
実際、注意事項としてあげても、頭文字数字のパスワード希望してくる人いますもんね！笑


と、いうことで、ベースは前の記事とほとんど同じで、上の内容を追加してます。



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ランダム文字列生成(もっと細かく！)</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){ 
        var randomString = '';
        var lower = 'abcdefghijklmnopqrstuvwxyz';
        var upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var numeral = '0123456789';
        var capital = lower + upper;
        var baseString = lower + upper + numeral;
        function randomMake(){
            randomString = '';
            //頭文字は小文字英字と大文字英字の中から選ぶ
            randomString += capital.charAt(Math.floor( Math.random() * 52));
            //残りの7桁は小文字英字と大文字英字と数字の中から選ぶ
            for(var i=0; i<7; i++) {
                randomString += baseString.charAt( Math.floor( Math.random() * 62));
            }
            //もし、数字が含まれていない もしくは 大文字英字が含まれていない もしくは 小文字英字が含まれていない いずれかの場合はもう一度ランダム文字列生成
            if(!(randomString.match(/[0-9]/) && randomString.match(/[A-Z]/) && randomString.match(/[a-z]/))){
                randomMake();
            }
            $('.js_randomView').val(randomString);
            $('.js_inputForm').click(function(){
                $('.js_password').val(randomString);
            });
        }   
        if($('.js_password').val() == ""){
            randomMake();
        }
        $('.js_change').click(function(){
            $('.js_password').val("");
            randomMake();
        });
    });
    </script>
</head>
<body>
    <form>
            <input type="text" name="password1" value="" class="js_password">
            <input type="password" name="password2" value="" class="js_password">
            <br />
            <input type="text" name="randomString" value="" size="13" class="js_randomView" readonly>&nbsp;<a href="javascript:;"><span class="js_change">更新</span></a>&nbsp;<a href="javascript:;"><span class="js_inputForm">フォームに反映</span></a>
    </form>
</body>
</html>



今回は、参考サイトなどがないので、簡単に解説いれましたー♪

少しだけ補足しますと、再帰関数を使っています。
function randomMakeは、ランダム文字列生成をした後、条件に合わなかった場合は、もう一度function randomMakeでランダム文字列生成します。
これを繰り返し、条件にあったランダム文字列が、フォームに表示されます。

ランダム文字列生成

パスワードや管理者ページのURLを決めるときなど、
勝手にランダムな英数字を作ってくれたら便利じゃない？

ってことで、考えてみました。

参考サイト
http://www.hanano-ya.jp/javascript/1347


ですが、使う機能は決めているので、めっちゃ変えてます。

こんな感じのもの作りました。

【機能】
ランダム作成ボタンを押したらランダムな大小英数字８桁の数値を作成する。
フォームではなくテキストとして表示する。
フォームに入力ボタンを押したらタイプパスワードのフォームに入力される。(上のテキストと同じもの。タイプをテキストにすると確認できる。何回クリックしても同じものが表示される。)
選び直すボタンを押したら、すべてクリアされる。(選び直すボタン押下後、フォームに記入ボタンを押してもクリアされる前のランダム数値が入力されない。)
ランダム作成ボタンを押してもその度にランダム数値が切り替わる。
【変更可能】
１クリックで２カ所同時に表記するかどうか。
大文字英字・小文字英字・数字を選べるようにしてあるが、組み合わせは変えられる。
【追加するかどうか】
パスワードになっているフォームは書き換えが可能なので、変更できないようにするかどうか。

その度に条件を変えたいなぁ～って方は、上の参考サイトを見るといいと思います♪

ざざっと！！
機能だけです。ビジュアルはみなさんでかっこ良くしてくださいb


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ランダム文字列生成</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var randomString;
        var baseString ='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        $('.make').click(function(){
            randomString = "";
            for(var i=0; i<8; i++) {
                randomString += baseString.charAt( Math.floor( Math.random() * 62));
            }
            $('.res').text(randomString);
            $('.input').click(function(){
                $('.form').val(randomString);
            });
        });
        $('.reset').click(function(){
            $('.res').text("");
            $('.form').val("");
            randomString = "";
        });
    });
    </script>
</head>
<body>
    <style>
    .res, .form{
        width: 120px;
        height: 24px;
        border: solid 2px;
        text-align: center;
    }
    </style>
    <button class="make">ランダム作成</button><button class="reset">選び直す</button>
    <p class="res"></p>
    <button class="input">フォームに入力</button>
    <br />
    <input type="password" class="form" value="" />
</body>
</html>



久しぶりにコーディングした。
え？・・・ってこと起きるけど、やっぱり楽しい♪
思ったよりすぐできて、なんかすっきりです。
だって、これ考えたままGW過ごしたくなかったから！！笑