thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下
register.html
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>农牧大家评-注册</title>
<link rel="stylesheet" href="__PUBLIC__/Css/regis.css" />
<script type="text/javascript" src='__PUBLIC__/Js/jquery-1.7.2.min.js'></script>
<script type="text/javascript" src='__PUBLIC__/Js/register.js'/></script>
<script type="text/javascript">
//ajax请求地址
var checkAccount = "{:U('checkAccount')}";
var checkUname = "{:U('checkUname')}";
var checkVerify = "{:U('checkVerify')}";
</script>
</head>
<body>
<div id='logo'></div>
<div id='reg-wrap'>
<form action="{:U('runRegis')}" method='post' name='register'>
<fieldset>
<legend><span style="font-weight:bold;font-size:16px;">用户注册</span></legend>
<p>
<label for="account">注册账号：</label>
<input type="text" name='account' id='account' class='input' placeHolder="6~16个字符" /><span style="margin-left:5px;color:red" id="accountflag"></span>
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" name='pwd' id='password' placeHolder="6~16个字符" class='input'/><span style="margin-left:5px;color:red" id="passwordflag"></span>
</p>
<style type="text/css">
.chushi{
width:68px;
height:18px;
line-height:18px;
background:#EEEEEE;
display:inline-block;
margin-top:3px;
text-align:center; }
.power{
width:68px;
height:18px;
line-height:18px;
background:red;
display:inline-block;
margin-top:3px;
text-align:center;
} </style>
<p>
<label for="pwded">密码强度：</label>
<span class="pwd-letter">
<span class="chushi">弱</span>
<span class="chushi">中</span>
<span class="chushi">强</span>
</span>
</p>
<p>
<label for="pwded">确认密码：</label>
<input type="password" name='pwded' id="repassword" class='input'/>
<span style="margin-left:5px;color:red" id="repasswordflag"></span>
</p>
<p>
<label for="uname">昵称：</label>
<input type="text" name='uname' id='uname' placeHolder="3~10个字符" class='input'/>
<span style="margin-left:5px;color:red" id="unameflag"></span>
</p>
<p>
<label for="verify">验证码：</label>
<input type="text" name='code' class='input' id='code'/>
<img src="{:U('verify')}" width='80' height='20' id='code-img'/>
<span style="margin-left:5px;color:red" id="codeflag"></span>
</p>
<p class='run'>
<input type="submit" value='马上注册' id='regis'/>
</p>
</fieldset>
</form>
</div>
</body>
</html>
register.js
$(function(){
//刷新验证码
function changeImg(){
$("#code-img").attr('src',function(i,v){
return v+'?'+Math.random();
});
}
//点击刷新验证码
$("#code-img").click(function(){
//验证码的更换
changeImg();
});
//设置错误和正确的样式
function flagError(account){
$('#'+account).removeClass('valid1');
$('#'+account+'flag').removeClass('valid2');
$('#'+account).addClass('error1');
$('#'+account+'flag').addClass('error2');
}
function flagValid(account){
$('#'+account).removeClass('error1');
$('#'+account+'flag').removeClass('error2');
$('#'+account).addClass('valid1');
$('#'+account+'flag').addClass('valid2');
}
//验证账户
//设置状态
var accountflag=false;
function checkAccountjs(oo){
var patten=/^\w{6,16}$/;
if(!patten.test(oo.value)){
accountflag=false;
flagError('account');
$('#accountflag').html("账号必须为6~16位只包含字母,数字,下划线");
return false;
}else{
//利用Ajax实现用户名查询是否存在
$.ajax({
url:checkAccount,
data:{'account':oo.value},
dataType:'json',
type:'post',
success:function(msg){
if(!msg){
flagError('account');
$('#accountflag').html("账户已被占用");
return false;
}else{
flagValid('account');
$('#accountflag').html('');
accountflag=true;
}
}
});
}
}
$('#account').blur(function(){
//查询用户名是否合法
checkAccountjs(this);
});
//密码验证
//设置状态
var passwordflag=false;
function checkPassword(oo){
var patt = /^\w{6,16}$/;
if(!patt.test(oo.value)){
flagError('password');
$('#passwordflag').html('密码必须为6~16位只包含字母,数字,下划线');
return false;
}else{
flagValid('password');
$('#passwordflag').html('');
passwordflag=true;
}
}
//判断密码强度
function qiangdu(oo){
var pwd_letter=$(".pwd-letter span");
var modes=0;
var pwd=oo.value;
if (pwd.length < 6 || pwd.length > 16){
pwd_letter.eq(modes).removeClass('power').siblings().removeClass('power');
pwd_letter.eq(modes).addClass('chushi').siblings().addClass('chushi');
}else{
if (/\d/.test(pwd)) modes++; //数字
if (/[a-z]/.test(pwd)) modes++; //小写
if (/[A-Z_]/.test(pwd)) modes++; //大写
pwd_letter.eq(modes-1).removeClass('chushi').siblings().removeClass('power');
pwd_letter.eq(modes-1).addClass('power').siblings().addClass('chushi');
}
}
$('#password').keyup(function(){
//查询用户名是否合法
checkPassword(this);
qiangdu(this);
});
//确认密码一致
//设置状态
var repasswordflag=false;
function checkRepassword(oo){
var password = $('#password').val();
if(password != oo.value){
if(oo.value.length>0){
flagError('repassword');
$('#repasswordflag').html('两次密码输入不一致');
return false;
}
}else{
if(oo.value.length>0){
flagValid('repassword');
$('#repasswordflag').html('');
repasswordflag=true;
}
}
}
$('#repassword').keyup(function(){
if (this.value.length < 6 || this.value.length > 16){
return false;
}
checkRepassword(this);
});
// //判断长度
// function strlen(str) {
// var len = 0;
// for (var i = 0; i < str.length; i++) {
// var c = str.charCodeAt(i);
// //单字节加1
// if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
// len++;
// }
// else {
// len += 1;
// }
// }
// return len;
// }
//验证昵称
//设置状态
var unameflag=false;
function checkUnamejs(oo){
var patten=/^[\u4e00-\u9fa5_\w]{3,10}$/;
if(!patten.test(oo.value)){
unameflag=false;
flagError('uname');
$('#unameflag').html("昵称必须为3~10位只包含字母,数字,下划线,中文");
return false;
}else{
//利用Ajax实现用户名查询是否存在
$.ajax({
url:checkUname,
data:{'uname':oo.value},
dataType:'json',
type:'post',
success:function(msg){
if(!msg){
flagError('uname');
$('#unameflag').html("账户已被占用");
return false;
}else{
flagValid('uname');
$('#unameflag').html('');
unameflag=true;
}
}
});
}
}
$('#uname').blur(function(){
//查询用户名是否合法
checkUnamejs(this);
});
//验证码
//设置状态
var codeflag=false;
function checkCode(oo){
if(oo.value.length!=4){
flagError('code');
$('#codeflag').html("验证码格式不对");
return false;
}
if (oo.value.length==4) {
$.ajax({
url:checkVerify,
data:{'code':oo.value},
dataType:'json',
type:'post',
success:function(msg){
if(!msg){
flagError('code');
$('#codeflag').html("验证码错误,请重新输入");
return false;
}else{
flagValid('code');
$('#codeflag').html('');
codeflag=true;
}
}
});
}
}
$('#code').keyup(function(){
checkCode(this);
});
$('#regis').click(function(){
if (accountflag&&passwordflag&&repasswordflag&&unameflag&&codeflag) {
return true;
}else{
checkAccountjs($('#account')[0]);
checkPassword($('#password')[0]);
qiangdu($('#password')[0]);
checkRepassword($('#repassword')[0]);
checkUnamejs($('#uname')[0]);
checkCode($('#code')[0]);
return accountflag&&passwordflag&&repasswordflag&&unameflag&&codeflag;
}
return false;
});
});
AccessController.class.php
<?php
namespace Home\Controller;
use Think\Controller;
/**
* 注册与登录控制器
*/
Class AccessController extends Controller {
/**
* 登录页面
*/
Public function index () {
$this->display();
} /**
* 注册页面
*/
Public function register () {
$this->display();
} /**
* 注册表单处理
*/
Public function runRegis () {
//post提交
if (!IS_POST) {
$this->error('页面不存在');
} //验证码判断
$code = $_POST['code'];
$verify = new \Think\Verify();
$verify->reset=false;
if (!$verify->check($code)) {
$this->error('验证码错误');
} //验证账户
$patten='/^\w{6,16}$/';
if(!preg_match($patten, $_POST['account'])){
$this->error('账户格式不对');
}
$where = array('account' => $account);
if (D('user')->where($where)->find()) {
$this->error('账户已被占用');
} //验证密码格式
$patten='/^\w{6,16}$/';
if(!preg_match($patten, $_POST['pwd'])){
$this->error('密码格式不对');
}
if ($_POST['pwd'] != $_POST['pwded']) {
$this->error('两次密码不一致');
} //验证昵称
$patten='/^[\x{4e00}-\x{9fa5}\w]{3,10}$/u';
echo $_POST['uname'];
if(!preg_match($patten, $_POST['uname'])){
$this->error('昵称格式不对');
}
$uname=$_POST['uname'];
$where = array('uname' => $uname);
if (D('userinfo')->where($where)->find()) {
$this->error('昵称已被占用');
} //提取POST数据
$data = array(
'account' =>I('post.account'),
'password' =>md5(I('post.pwd')) ,
'registime' => $_SERVER['REQUEST_TIME'],
'userinfo' => array(
'username' => I('post.uname')
)
);
$id = D('UserRelation')->insert($data);
if ($id) {//插入数据成功后把用户ID写SESSION
session('uid', $id);
session('uname', $uname);
//跳转至首页
$this->success('注册成功，正在为您跳转...','Home/Index/index');
} else {
$this->error('注册失败，请重试...');
}
} /**
* 获取验证码
*/
Public function verify() {
$Verify = new \Think\Verify();
$Verify->reset = true;
$Verify->length = 4;
$Verify->useNoise = false;
$Verify->entry();
} /**
* 异步验证账号是否已存在
*/
Public function checkAccount () {
if (!IS_POST) {
$this->error('页面不存在');
}
$account =I('post.account');
$where = array('account' => $account);
if (D('user')->where($where)->find()) {
echo 'false';
} else {
echo 'true';
}
} /**
* 异步验证昵称是否已存在
*/
Public function checkUname () {
if (!IS_POST) {
$this->error('页面不存在');
}
$username =I('post.uname');
$where = array('username' => $username);
if (D('userinfo')->where($where)->find()) {
echo 'false';
} else {
echo 'true';
}
} /**
* 异步验证验证码
*/
Public function checkVerify () {
if (!IS_POST) {
$this->error('页面不存在');
}
$code = I('post.code');
$verify = new \Think\Verify();
$verify->reset=false;
if (!$verify->check($code)) {
echo 'false';
} else {
echo 'true';
}
}
}
?>
thinkphp+jquery+ajax前后端交互注册验证的更多相关文章
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- JSON（及其在ajax前后端交互的过程）小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
- AJAX 前后端交互 验证信息是否正确
1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...
- Django前后端交互&数据验证
一.前端--->后端 1.form表单 <form method="post" action="/test/?a=1&b=2"> {% ...
- ajax前后端交互原理（5）
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...
- ajax前后端交互原理（3）
3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...
- ajax前后端交互原理（1）
1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
- JQuery ajax 前后端传值介绍
https://jingyan.baidu.com/album/ca41422f0bf08e1eae99ed04.html?picindex=5 现在我们话不多说,开始仔细讲解一下我们ajax内部传递 ...
- ajax前后端交互原理（7）
7.ajax函数封装 7.1.实例引入 需求: 每秒钟请求一次服务器 获取到数据 实现: 把ajax进行封装 <!DOCTYPE html> <html> <head&g ...
随机推荐
- 在稳定性测试中，将测试结果持续填加进入html报告
公司需要设计一个稳定性测试,就是一直持续的跑不同的用例,直到人为停止,用例基本完成,基本框架思路就是随机选择一个testcase,跑完后输出结果.但存在一个问题,现在的unittest或nose测试报 ...
- 利用 background 和 filter 模糊指定区域
背景知识:background-size: cover;,background-attachment:fixed;,filter:blur() 难题: 通常,我们会通过filter:blur()去实现 ...
- 慕课网，vue高仿饿了吗ASP源码视频笔记
1.源码笔记 我的源码+笔记(很重要):http://pan.baidu.com/s/1geI4i2Z 感谢麦子学院项目相关视频 2.参考资料 Vue.js官网(https://vuejs.org.c ...
- jQuery的下面是动态表格动态表单中的HTML代码
动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...
- HDU 2187 - 悼念512汶川大地震遇难同胞——老人是真饿了 - [大水题]
讲真,这么水的题,我都不怎么好意思扔到博客上来,但是没办法啊,我总得证明一下今天上午我不是在寝室里瞎玩浪费掉的…… 思路就是,把米按单价从小到大排个序,便宜的买的越多越好,直到钱花光为止……我真的都不 ...
- Oracle备份恢复之断电导致控制文件和日志文件损坏修复
Oracle数据库遭遇断电遭遇ora-00214.ora-00314.ora-00312错误恢复案例一枚 1.数据库在17日21:19启动开始报错ora-214错误: Tue Jan 17 21:19 ...
- memory addresses
php.net References in PHP are a means to access the same variable content by different names. The ...
- ArcGIS Server 内存占用相关
发布服务个数是否有上限? 不仅是服务个数,每个服务的实例数设置非常影响机器内存与CPU的占用. 发布服务时,如果服务不经常被访问,可以将最低实例数设置为0,避免后台长期占用内存. Server需要的机 ...
- win7系统注册表的权限修改
重装win7系统后,安装软件时提示注册表项拒绝访问 解决方法: 输入“Gpedit.msc”后回车,打开“组策略”.然后,依次展开“用户配置→管理模板→系统”,双击右侧窗口中的“阻止访问注册表编辑工具 ...
- es fielddata理解
在es中,text类型的字段使用一种叫做fielddata的查询时内存数据结构.当字段被排序,聚合或者通过脚本访问时这种数据结构会被创建.它是通过从磁盘读取每个段的整个反向索引来构建的,然后存存储在j ...