当前位置:编程学习 > JS >>

js表单验证实例

 <form id="loginform" method="post" action="post.php教程" style="margin:0px; padding:0px;" >
                    <table width="400" border="0" align="center" cellpadding="0" cellspacing="0" style="line-height:30px;"> 
                        <tr>
                            <td height="30" align="right"><font style="color:#f6892e; font-weight:bold">·</font>您的姓名(*):</td>
                            <td height="30" align="left" ><input type="text" name="name" id="name" class="sub2"></td>
                        </tr>
                        <tr>
                            <td height="30" align="right"><font style="color:#f6892e; font-weight:bold">·</font>电    话(*):</td>
                            <td height="30" align="left"><input type="text" name="tel" id="tel" class="sub2"></td>
                        </tr>
                        <tr>
                            <td height="30" align="right"><font style="color:#f6892e; font-weight:bold">·</font>您的常用qq(*):</td>
                            <td height="30" align="left"><input type="text" name="cardid" id="cardid" class="sub2"></td>
                        </tr>
                        <tr>
                            <td height="30" align="right" style=" vertical-align: middle"><font style="color:#f6892e; font-weight:bold">·</font>您的购买需求:</td>
                            <td height="30" align="left">
                                <textarea name="bz" cols="30" style="height:50px;"></textarea>
                            </td>
                        </tr>
                        <input name="type" type="hidden" value="jhzsky" />
                        <tr>
                            <td height="30" colspan="2" align="center"><input  type="submit" value="提交报名"></td>
                        </tr>
                        <tr>
                            <td height="30" colspan="2" align="center" id="checkinfo"></td>
                        </tr>
                    </table>
                </form>
                <script type="text/网页特效">
                    var form=document.getelementbyid("loginform");
                    form.onsubmit=function(){
                        if(form.name.value==""){
                            document.getelementbyid("checkinfo").innerhtml="姓名不能为空";
                            return false;
                        }
                        if(form.tel.value==""){
                            document.getelementbyid("checkinfo").innerhtml="电话号码不能为空";
                            return false;
                        }
                        var patrn=/(^0[0-9]{2,3}-[1-9]{8}$)|[1-9]{7,8}|(^0?1[0-9]{10}$)/;
                        if (!patrn.exec(form.tel.value)) {
                            document.getelementbyid("checkinfo").innerhtml="电话号码不合法";
                            return false;
                        }
                        if(form.cardid.value==""){
                            document.getelementbyid("checkinfo").innerhtml="qq号码不能为空";
                            return false;
                        }
                        var request=getrequest();
                        if(request){
                            var formdata="floorname="+form.floorname.value+"&pass="+form.pass.value;//构造发送数据字符串
                            request.open("get","save.php?"+formdata,true);
                            request.onreadystatechange=function(){
                                callback(request);//指定回调函数
                            }
                            request.send(null);
                        }
                        return false;//阻止表单按常规方式提交
                    }
                </script>

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,