php用户注册页面利用js进行表单验证具体实例
2015-01-24信息快讯网
这篇文章介绍了php用户注册页面利用js进行表单验证具体实例,有需要的朋友可以参考一下
<!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小技巧之函数重载
mac下Apache + MySql + PHP搭建网站开发环境
在PHP中使用X-SendFile头让文件下载更快
PHP is_subclass_of函数的一个BUG和解决方法
PHP中数组的分组排序实例
PHP+javascript制作带提示的验证码源码分享
php5.2以下版本无json_decode函数的解决方法
浅析php中json_encode()和json_decode()
PHP+Mysql+Ajax+JS实现省市区三级联动
PHP小技巧之JS和CSS优化工具Minify的使用方法
一个简单的PHP验证码实现代码
php使用正则过滤js脚本代码实例
php验证是否是md5编码的简单代码
thinkphp验证码显示不出来的解决方法
一漂亮的PHP图片验证码实例
zf框架的registry(注册表)使用示例
php上传文件,创建递归目录的实例代码
10 个经典PHP函数
php中怎么搜索相关联数组键值及获取之
php class类的用法详细总结
PHP字符串长度计算 - strlen()函数使用介绍
php后台如何避免用户直接进入方法实例
PHP 验证码不显示只有一个小红叉的解决方法
php json_encode值中大括号与花括号区别
PHP验证码函数代码(简单实用)
PHP JS Ip地址及域名格式检测代码
PHP加密函数 Javascript/Js 解密函数
php jq jquery getJSON跨域提交数据完整版
PHP json_encode中文乱码问题的解决办法
php生成图形验证码几种方法小结
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
一个漂亮的php验证码类(分享)
解析php类的注册与自动加载
php 注册时输入信息验证器的实现详解