php用户注册页面利用js进行表单验证具体实例


Posted in PHP onOctober 17, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
        <title>用户注册 - 三水点靠木</title> 
        <link href="../css/login.css" rel="stylesheet" type="text/css" /> 
        <link href="../css/page_bottom.css" rel="stylesheet" type="text/css" /> 
        <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
        <script type="text/javascript"> 
            var flag = { 
                "email":false, 
                "nickname":false, 
                "password":false, 
                "verify":false 
            };             $(function(){ 
                $("#txtEmail").blur(function () { 
                                        var email=$(this).val(); 
                                        //alert(email); 
                                        if(email==""){ 
                                            $("#email\\.info").html("Email地址不能为空"); 
                                            return; 
                                        } 
                                        var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/; 
                                        if(!pattern.test(email)){ 
                                            $("#email\\.info").html("Email格式不正确"); 
                                            return; 
                                        } 
                                        $.get("check_email.php?email="+email,null, 
                                            function(data){ 
                                                $("#email\\.info").html(data); 
                                                if (data=="可以注册") { 
                                                    flag.email=true; 
                                                } 
                                            } 
                                        ); 
                                    }); 
                $("#txtNickName").blur(function () { 
                                            var nickname=$(this).val(); 
                                            if(nickname==""){ 
                                                $("#name\\.info").html("昵称不能为空"); 
                                                return; 
                                            } 
                                            var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/; 
                                            if (!pattern.test(nickname)) { 
                                                $("#name\\.info").html("昵称格式不正确"); 
                                                return; 
                                            }else{ 
                                                $("#name\\.info").html("昵称格式正确"); 
                                                flag.nickname=true; 
                                                return; 
                                            } 
                                       }); 
                $("#txtPassword").blur(function () { 
                                            var password=$(this).val(); 
                                            if (password=="") { 
                                                $("#password\\.info").html("密码不能为空"); 
                                                return; 
                                            } 
                                            var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/; 
                                            if (!pattern.test(password)) { 
                                                $("#password\\.info").html("密码格式不正确"); 
                                                return;    
                                            }else{ 
                                                $("#password\\.info").html("密码格式正确"); 
                                                //flag.password=true; 
                                                return; 
                                            } 
                                       }); 
                $("#txtRepeatPass").blur(function () { 
                                            var password1=$(this).val(); 
                                            if (password1=="") { 
                                                $("#password1\\.info").html("密码不能为空"); 
                                                return; 
                                            } 
                                            var pattern = /\b(^['A-Za-z0-9]{4,20}$)\b/; 
                                            if (!pattern.test(password1)) { 
                                                $("#password1\\.info").html("密码格式不正确"); 
                                                return;    
                                            }else if(password1!=$("#txtPassword").val()){ 
                                                $("#password1\\.info").html("两次输入的密码不一致"); 
                                                return; 
                                            }else{ 
                                                $("#password1\\.info").html("重复密码正确"); 
                                                flag.password=true; 
                                                return; 
                                            }                                             
                                        }); 
                $("#txtVerifyCode").blur(function () { 
                                            var verify=$(this).val(); 
                                            if(verify==""){ 
                                                $("#number\\.info").html("验证码不能为空"); 
                                                return; 
                                            } 
                                            $.post("./verify/check.php",{verify:verify}, 
                                                function(data){ 
                                                    $("#number\\.info").html(data); 
                                                    if (data=="验证成功") { 
                                                        flag.verify=true; 
                                                    } 
                                                } 
                                            ); 
                                         }) 
                $("#f").submit(function(){ 
                                    var ok = flag.email&&flag.password&&flag.verify&&flag.nickname; 
                                    if(ok==false){ 
                                        alert("表单项正在检测或存在错误"); 
                                        history.back(); 
                                        return false; 
                                    } 
                                    return true; 
                                });  
            }) 
        </script> 
    </head> 
    <body> 
        <?php include("../common/head.php"); ?> 
        <div class="login_step"> 
            注册步骤:<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功 
        </div> 
        <div class="fill_message"> 
            <form name="ctl00" method="post" action="save_reg.php" id="f"> 
                <h2>以下均为必填项</h2> 
                <table class="tab_login" > 
                    <tr> 
                        <td valign="top" class="w1">请填写您的Email地址:</td> 
                        <td> 
                            <input name="email" type="text" id="txtEmail" class="text_input"/> 
                            <div class="text_left" id="emailValidMsg"> 
                                <p>请填写有效的Email地址。</p> 
                                <span id="email.info" style="color:red"></span> 
                            </div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td valign="top" class="w1">设置您在三水点靠木的昵称:</td> 
                        <td> 
                            <input name="nickname" type="text" id="txtNickName" class="text_input" /> 
                            <div class="text_left" id="nickNameValidMsg"> 
                                <p>由小写英文字母、中文、数字组成,长度4-20个字符,一个汉字为两个字符。</p> 
                                <span id="name.info" style="color:red"></span> 
                            </div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td valign="top" class="w1">设置密码:</td> 
                        <td> 
                            <input name="password" type="password" id="txtPassword" class="text_input" /> 
                            <div class="text_left" id="passwordValidMsg"> 
                                <p>您的密码可以由大小写英文字母、数字组成,长度6-20位。</p> 
                                <span id="password.info" style="color:red"></span> 
                            </div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td valign="top" class="w1">再次输入您设置的密码:</td> 
                        <td> 
                            <input name="password1" type="password" id="txtRepeatPass" class="text_input"/> 
                            <div class="text_left" id="repeatPassValidMsg"> 
                            <span id="password1.info" style="color:red"></span> 
                            </div> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td valign="top" class="w1">验证码:</td> 
                        <td> 
                            <img class="yzm_img" id='imgVcode' src='./verify/verify.php' style="cursor:pointer" border='0' onclick="document.getElementById('imgVcode').src='./verify/verify.php?t='+Math.random()"/> 
                            <input name="number" type="text" id="txtVerifyCode" class="yzm_input"/> 
                            <div class="text_left t1"> 
                                <p class="t1"> 
                                    <span id="vcodeValidMsg">请输入图片中的四个字母。</span>                                     
                                    <a href="#" style="cursor:pointer" onclick="document.getElementById('imgVcode').src='./verify/verify.php?t='+Math.random()">看不清楚?换个图片</a> 
                                    <br /> 
                                    <span id="number.info" style="color:red"></span> 
                                </p> 
                            </div> 
                        </td> 
                    </tr> 
                </table> 
                <div class="login_in"> 
                    <input id="btnClientRegister" class="button_1" name="submit" type="submit" value="注 册"/> 
                </div> 
            </form> 
        </div> 
        <?php include("../common/foot.php"); ?> 
    </body> 
</html>
PHP 相关文章推荐
递归列出所有文件和目录
Oct 09 PHP
中篇:安装及配置PHP
Dec 13 PHP
PHP开发中常用的8个小技巧
Aug 27 PHP
php 使用post,get的一种简洁方式
Apr 25 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
Jan 21 PHP
WordPress中is_singular()函数简介
Feb 05 PHP
php实现的mysqldb读写分离操作类示例
Feb 07 PHP
php如何修改SESSION的生存存储时间的实例代码
Jul 05 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
Apr 02 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
Apr 16 PHP
PHP进阶学习之依赖注入与Ioc容器详解
Jun 19 PHP
PHP基于ip2long实现IP转换整形
Dec 11 PHP
10 个经典PHP函数
Oct 17 #PHP
php中怎么搜索相关联数组键值及获取之
Oct 17 #PHP
php class类的用法详细总结
Oct 17 #PHP
div li的多行多列 无刷新分页示例代码
Oct 16 #PHP
无刷新动态加载数据 滚动条加载适合评论等页面
Oct 16 #PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 #PHP
php后台如何避免用户直接进入方法实例
Oct 15 #PHP
You might like
PHP导出Excel实例讲解
2016/01/24 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python搭建微信公众平台
2016/02/09 Python
Python单例模式实例详解
2017/03/01 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
教师党员承诺书
2014/03/25 职场文书
学校安全管理责任书
2014/07/23 职场文书
物业消防安全责任书
2014/07/23 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
入党现实表现材料
2014/12/23 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers