ホームページ >ウェブフロントエンド >jsチュートリアル >フロントエンド検証コードをjsで実装するにはどうすればよいですか? (コード)

フロントエンド検証コードをjsで実装するにはどうすればよいですか? (コード)

不言
不言オリジナル
2018-08-15 15:55:331915ブラウズ

この記事の内容は、フロントエンド検証コードをjsで実装する方法についてです。 (コード)、それは特定の参考値を必要としている友人がそれを参照できることを願っています。

この知識ポイントを確認できる学生は、少なくとも JavaWeb の知識を少しは習得しているはずで、このコードを理解し、その使用方法を知っているはずです。

<body>
  <div class="input">
            &nbsp&nbsp<span 
style="font-size:16px;font-family: 
黑体">验证码:</span>&nbsp<input id="t1" type="text" name="u" 
 onblur="but()" />
                   <span id="discode"></span>
                   <input type="button" value="点击刷新" class="c" style="height:20px;"onClick="createCode()">
      </div>
<script language="javascript">
        var code; //在全局 定义验证码
        function createCode() { //创建验证码函数
            code = "";
            var codeLength = 4;//验证码的长度
            var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, &#39;A&#39;, &#39;B&#39;,
                    &#39;C&#39;, &#39;D&#39;, &#39;E&#39;, &#39;F&#39;, &#39;G&#39;, &#39;H&#39;, &#39;I&#39;, &#39;J&#39;, &#39;K&#39;, &#39;L&#39;, &#39;M&#39;, &#39;N&#39;,
                    &#39;O&#39;, &#39;P&#39;, &#39;Q&#39;, &#39;R&#39;, &#39;S&#39;, &#39;T&#39;, &#39;U&#39;, &#39;V&#39;, &#39;W&#39;, &#39;X&#39;, &#39;Y&#39;, &#39;Z&#39;);//所有候选组成验证码的字符,当然也可以用中文的
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 36);
                code += selectChar[charIndex];
            }
            // 设置验证码的显示样式,并显示
            document.getElementById("discode").style.fontFamily = "黑体"; //设置字体
            document.getElementById("discode").style.letterSpacing = "20px"; //字体间距
            document.getElementById("discode").style.color = "red"; //字体颜色
            document.getElementById("discode").innerHTML = code; // 显示
        }
        function but() {//验证验证码输入是否正确
            var val1 = document.getElementById("t1").value;
            var val2 = code;
            if (val1 != val2) {
                
                document.getElementById(&#39;t1&#39;).value = "";
            }
        }
    </script>
</body>

関連する推奨事項:

js データ検証コレクション、js メール検証、js URL 検証、js 長さ検証、js デジタル検証、その他の単純なパッケージ_フォーム特殊効果

JS 共通検証 REG

ユーザーが入力した携帯電話番号を検証し、それをバックグラウンド コードに渡すことができる JS コードを探しています

以上がフロントエンド検証コードをjsで実装するにはどうすればよいですか? (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。