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 相关文章推荐
关于php连接mssql:pdo odbc sql server
Jul 20 PHP
PHP滚动日志的代码实现
Jun 10 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
May 13 PHP
thinkphp3.x中变量的获取和过滤方法详解
May 20 PHP
php获取开始与结束日期之间所有日期的方法
Nov 29 PHP
Mac系统完美安装PHP7详细教程
Jun 06 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
Oct 14 PHP
php微信公众号开发之校园图书馆
Oct 20 PHP
PHP生成随机码的思路与方法实例探索
Apr 11 PHP
在 Laravel 项目中使用 webpack-encore的方法
Jul 21 PHP
laravel Validator ajax返回错误信息的方法
Sep 29 PHP
PHP pthreads v3下worker和pool的使用方法示例
Feb 21 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
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python 读写文件的操作代码
2018/09/20 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python用for循环求和的方法总结
2019/07/08 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
个人教师自我评价范文
2013/12/02 职场文书
单位人事专员介绍信
2014/01/11 职场文书
歌咏比赛主持词
2015/06/29 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
初中思品教学反思
2016/02/20 职场文书