0

この単純な css および js パスワード強度チェッカーを試しています。以下のように css と js がファイルに含まれていると、非常にうまく機能します。ただし、jsを別のファイルに入れてこのファイルに含めると、機能しません。また、css を外部の css ファイルに入れると、ページのスタイルが決まりません。

それを含めるために、私は単に入れていました：

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/js.js"></script>

私が何を間違っているのかわかりませんか、それともコードに関係していて、何らかの理由で同じファイルにある必要がありますか?

後でphpを追加するため、ファイルはphpファイルですが、何も変更されませんか？

<html>
<head>
    <title>strength check</title>
    <style type="text/css">
    #passwordStrength {
        height:10px;
        display:block;
        float:left; 
    }
    .strength0 {
        width:150px;
        background:#cccccc;
    }     
    .strength1 {
        width:20px;
        background:#ff0000;
    } 
    .strength2 {
        width:40px;    
        background:#ff5f5f;
    } 
    .strength3 { 
        width:60px;
        background:#56e500;
    }
    .strength4 {
        background:#4dcd00;
        width:80px;
    } 
    .strength5 { 
        background:#399800;
        width:150px;
    } 
    </style>
    <script language="javascript" type="text/javascript">
    function passwordStrength(password) {

        var desc = new Array();
        desc[0] = "Very Weak";
        desc[1] = "Weak";
        desc[2] = "Better";
        desc[3] = "Medium";
        desc[4] = "Strong";
        desc[5] = "Strongest";

        var score = 0;

        //if password bigger than 6 give 1 point
        if (password.length > 6) score++;

        //if password has both lower and uppercase characters give 1 point      
        if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) score++;

        //if password has at least one number give 1 point
        if (password.match(/\d+/)) score++;

        //if password has at least one special caracther give 1 point
        if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) score++;
        //if password bigger than 12 give another 1 point
        if (password.length > 12) score++;

        document.getElementById("passwordDescription").innerHTML = desc[score];
        document.getElementById("passwordStrength").className = "strength" + score;
    }​
    </script>   
</head>
<body>
    <input type="password" caption="password" name="password" onkeyup="passwordStrength(this.value);" size="60">
    <div style="font-size: 10px"; id="passwordDescription">Password Strength</div>
    <div class="strength0" id="passwordStrength"></div> 
</body>
</html>
4

4 に答える 4

3

リンクの先頭にある を削除し/ます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/js.js"></script>

これら/は、ファイルがドメインのルートにあることを意味します。

于 2012-07-05T12:48:13.313 に答える
0

先頭のスラッシュなしでパスを設定してみてください。サーバーのサブディレクトリにすべてがある場合、スラッシュでパスが壊れる可能性があります。

<link rel="stylesheet" href="css/style.css" />
<script src="js/js.js"></script>

HTML5 では、type 属性を取り除くこともできます (HTML5 doctype を使用する場合に備えて)。

于 2012-07-05T12:50:09.583 に答える
0
  1. もう一度やり直してください。
  2. Firefox でページを開きます。
  3. ソースを表示
  4. ソース ページでは、スクリプトと css ファイルがリンクとして表示されます。
  5. リンクをクリックします。ページを表示できませんと表示されます。

その場合、インクルードの場所が間違っています!

css と js を正しい場所に配置します。手順 5 で、ページ以外が表示されないことが示されるまで続けます。

于 2012-07-05T12:46:47.387 に答える
0

使用しているサーバーはわかりませんが、Tomcat を使用している場合は、ソース パスの先頭のスラッシュを削除する必要があります。

試す：

css/style.css

それ以外の

/css/style.css
于 2012-07-05T12:48:03.840 に答える