JavaScript 表单验证学习笔记-tutorial js-php.cn

JavaScript 表单验证学习笔记

PHPz

Lepaskan： 2017-04-04 14:11:39

asal

1260 orang telah melayarinya

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？

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

验证日期是否输入正确？

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

必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

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

Salin selepas log masuk

E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

        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;
            }
        }

Salin selepas log masuk

今天的练习写的不好没时间细化直接贴代码了

        <!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>

Salin selepas log masuk

    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;
    }

Salin selepas log masuk

Atas ialah kandungan terperinci JavaScript 表单验证学习笔记. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!