php用户注册页面使用js进行表单验证具体实例
来源：互联网 发布：淘宝博娱乐 编辑：程序博客网 时间：2024/06/11 19:30
这篇文章介绍了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>用户注册 - 脚本学堂 - www.jbxue.com</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用户注册页面使用js进行表单验证具体实例
- php用户注册页面利用js进行表单验证
- php用户注册表单验证
- 仿京东的注册页面, 使用jQuery进行表单验证
- 用户注册表单验证
- 表单验证---用户注册
- 注册页面表单验证
- 用户注册页面--ajax.php.js.css
- 使用正则表达式验证用户注册页面
- js注册表单验证
- js表单注册验证
- 一个注册会员页面中：表单验证的js
- JavaScript用户注册表单验证
- 用户注册_表单验证
- yii用户注册表单验证
- yii用户注册表单验证
- 表单验证之用户注册
- js进行表单验证
- ubuntu 12.04 LTS 中创建FTP服务器
- 刚安装时mysql不能修改密码以及忘记root密码
- 使用IBinder的linkToDeath机制来释放资源
- java学习笔记---java异常处理
- TCP、UDP协议详解
- php用户注册页面使用js进行表单验证具体实例
- 3GP/MP4 视频文件格式解析及其播放原理（转）
- Android4.1.1_r1系统移植------TP移植篇
- VS2008用mfc读Excel文件
- mysql备份脚本以及删除前5天的备份文件
- CentOS6.4换YUM源
- POJ 2752 Seek the Name, Seek the Fame （KMP)
- C# 执行bat批处理文件的小例子
- 适合秋季饮用的润燥润肺的果蔬汁
