JavaScript 양식 검증 연구 노트-JS 튜토리얼-php.cn

JavaScript 양식 검증 연구 노트

PHPz

풀어 주다： 2017-04-04 14:11:39

원래의

1260명이 탐색했습니다.

JavaScript 양식 유효성 검증

JavaScript은 데이터가 서버로 전송되기 전에 HTML 양식의 입력 데이터를 검증하는 데 사용할 수 있습니다.
양식 데이터의 정확성을 확인하려면 JavaScript가 필요한 경우가 많습니다.

양식 데이터가 비어 있는지 확인하시겠습니까?

입력한 email 주소가 올바른지 확인하시겠습니까?

날짜가 올바르게 입력되었는지 확인하셨나요?

양식 입력 내용이 숫자인지 확인하시겠어요?

필수(또는 필수) 항목
다음 기능은 사용자가 양식에 필수(또는 필수) 항목을 입력했는지 확인하는 데 사용됩니다. 필수이거나 필수 필드가 비어 있으면 경고 상자가 나타나고 함수의 반환 값은 false이고, 그렇지 않으면 함수의 반환 값은 true입니다(데이터에 문제가 없음을 의미).

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

로그인 후 복사

이메일 유효성 검사
다음 기능은 입력된 데이터가 이메일 주소의 기본 구문을 준수하는지 확인하는 기능입니다.
즉, 입력 데이터에는 @ 기호와 마침표(.)가 포함되어야 합니다. 동시에 @는 이메일 주소의 첫 번째 문자가 될 수 없으며 @ 뒤에 마침표가 하나 이상 있어야 합니다.

        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>

로그인 후 복사

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!