ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してフォームを検証する方法

JavaScript を使用してフォームを検証する方法

PHPz転載: 2016-05-16 15:57:471641ブラウズ

1. 原則

入力ボックスに onblur イベントを追加することでフォームが検証されます。入力ボックスがフォーカスを失うと、js 関数が呼び出され、入力値が決定され、ドキュメントが操作されます。 innerHTML 属性を通じて入力ボックスの背後にあるコンテンツを変更すると、プロンプトが表示されます。

最後に、formタグ内にonsubmitイベントを追加し、登録ボタンがクリックされた際に、すべての入力ボックスの値が要件を満たした場合のみtrueを返し、フォームが送信されます。それ以外の場合は false が返され、フォームは送信されません。

2. 写真

JavaScript を使用してフォームを検証する方法

3. 注意事項

js で正規表現を作成するには、「/^...」を使用する必要があります。 $/" 、^ は先頭から一致することを意味し、$ は最後の文字まで一致することを意味します。たとえば、var reg=/^w [@]w [.comn]{3,4}$/;

normal式 w は a ～ z、A ～ Z、0 ～ 9 を表し、アンダースコアも含まれます。

通常、文字列が正規表現と一致するかどうかを判断するには、通常のテストメソッドを使用します。戻り値が true の場合、一致は成功です。 false が返された場合、一致は失敗します。

4. 実装コード

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

その他の関連チュートリアルについては、JavaScript ビデオチュートリアル

を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript がドキュメント座標とビューポート座標を取得する_JavaScript スキル次の記事：JavaScript がドキュメント座標とビューポート座標を取得する_JavaScript スキル

続きを見る

JavaScript を使用してフォームを検証する方法

関連記事