JavaScript フォーム検証の学習メモ-jsチュートリアル-php.cn

JavaScript フォーム検証の学習メモ

PHPz

リリース： 2017-04-04 14:11:39

オリジナル

1279 人が閲覧しました

JavaScript フォームの検証

JavaScript を使用すると、データがサーバーに送信される前に HTML フォームの入力データを検証できます。 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？

验证输入是否是一个正确的email地址？

验证日期是否输入正确？

验证表单输入内容是否为数字型？

必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 trueフォームデータは、その正確性を検証するために JavaScript の使用を必要とすることがよくあります:

フォームデータが空かどうかを確認しますか?

入力された email アドレスが正しいかどうかを確認しますか?

日付が正しく入力されているか確認してください?

フォーム入力内容が数値かどうかを確認しますか?

必須 (または必須) 項目

次の関数は、ユーザーがフォームに必須 (または必須) 項目を入力したかどうかを確認するために使用されます。フィールドが必須であるか、必須フィールドが空の場合、警告ボックスがポップアップ表示され、関数の戻り値は false になります。それ以外の場合、関数の戻り値は true になります。 > (データが質問ではないことを意味します): 🎜

    function validateForm(){ 
    var x=document.forms["myForm"]["fname"].value; 
    if (x==null || x=="")
    { alert("姓必须填写"); 
    return false;
    }}

ログイン後にコピー

🎜電子メール検証🎜 以下の関数は、入力されたデータが電子メールアドレスの基本構文に準拠しているかどうかをチェックします。 🎜これは、入力されたデータには @ 記号とピリオド (.) が含まれている必要があることを意味します。同時に、@ をメールアドレスの最初の文字にすることはできません。@ の後には少なくとも 1 つのピリオドが必要です: 🎜

        function validateForm(){
            var x=document.forms["myForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
        }

ログイン後にコピー

🎜今日の演習はうまく書かれておらず、推敲する時間がなかったので、投稿しましたコードを直接🎜

        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>登录页面</title>
            <link rel="stylesheet" href="C:\Users\Administrator\Desktop\bootstrap-3.3.5-dist\css\bootstrap.min.css" />
            <script type="text/javascript" src="dse.js" ></script>
        <!--      <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
        <!--    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> -->
            </head>
        <body>
            <p class="p1">
            <p class="p0">
        <form class="form-horizontal" role="form">
            <table >a
            <tr>
                <td align=&#39;right&#39;><label>用户名：    </label></td>
                <td ><input type="text" class="form-control" id=&#39;user&#39; " /></td>
                <td align=&#39;right&#39; id="worr1" width="150px"></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label> 昵称：    </label></td>
                <td ><input type="text" class="form-control" id="name"/></td>
                <td align=&#39;right&#39; id="worr2" ></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>密码：    </label></td>
                <td ><input type="password" class="form-control" id="pwd1" /></td>
                <td align=&#39;right&#39; id="worr3"></td>
            </tr>        
            <tr>
                <td align=&#39;right&#39;><label>确认密码：    </label></td>
                <td><input type="password" class="form-control" id="pwd2" /></td>
                <td align=&#39;right&#39; id="worr"></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>邮箱：    </label></td>
                <td > <input type="text" class="form-control" id="email" /></td>
                <td align=&#39;right&#39; id="worr4" ></td>
            </tr>
            <tr>
                <td align=&#39;right&#39;><label>手机号：    </label></td>
                <td ><input type="text" class="form-control" id="phone" /></td>
                <td align=&#39;right&#39; id="worr5" ></td>
            </tr>
            <tr>
                <td  colspan="3"><a href="#" id="a1">用户手册</a></td>
            </tr>
            <tr>
                <td  colspan="3"><button onclick ="but1()" class="btn btn-default"><label >提交</label></button></td>
                <td align=&#39;right&#39; id="worr6" ></td>
            </tr>
            </table>

        </form>

        </p>
            </body>
        </html>

ログイン後にコピー

🎜js🎜

    function but1() {
        but2();
        but3();
        but4();
        but5();
        but6();
    }
    function but2() {
        var pwd1=document.getElementById('pwd1').value;
        var pwd2=document.getElementById('pwd2').value;

            if (pwd1=="") {
            document.getElementById('worr3').innerHTML="密码不能为空";
            }
            if (pwd2=="") {
            document.getElementById('worr').innerHTML="密码不能为空";
            }
            try{
                if (pwd1===pwd2) {

                }else{
                        throw '密码不一致';            
                }
            }catch(err){
                document.getElementById('worr').innerHTML=" "+ err +" ";
                // document.getElementById('worr').style.color='red';

            }

    }
    function but3() {
        var user=document.getElementById('user').value;
        if (user=="") {
            document.getElementById('worr1').innerHTML="用户名不能为空";
            }
        var name=document.getElementById('name').value;
        if (name=="") {
            document.getElementById('worr2').innerHTML="昵称不能为空";
            }
    }
    function but4() {
        var email=document.getElementById('email').value;
        if (email=="") {
        document.getElementById('worr4').innerHTML="邮箱不能为空";
        }else{
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
            document.getElementById('worr4').innerHTML="不是一个有效的 e-mail 地址";
        }

        }
    }
    function but5() {

        var phone=document.getElementById('phone').value;
        if (phone=="") {
        document.getElementById('worr5').innerHTML="手机号不能为空";
        }else{
     var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
     if (reg.test(phone)) {
          alert("号码正确~");
     }else{
              document.getElementById('worr5').innerHTML="号码有误~";
     };

        }
    }
    function but6() {
            var user=document.getElementById('user').value;
            var name=document.getElementById('name').value;
            var pwd2=document.getElementById('pwd2').value;
            var email=document.getElementById('email').value;
            var phone=document.getElementById('phone').value;
              document.getElementById('worr6').innerHTML=" "+user+"  "+name+"  "+pwd2+"  "+email+"  "+phone;
    }

ログイン後にコピー

🎜 🎜

以上がJavaScript フォーム検証の学習メモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。