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 ...
随机推荐
- C语言位操作--判断整数的符号
关于衡量计算操作的方法: 当为算法统计操作的数量的时候,所有的C运算符被认为是一样的操作.中间过程不被写入随机存储器(RAM)而不被计算,当然,这种操作数的计算方法,只是作为那些接近机器指令和CPU运 ...
- CentOS 安装Sqlite3
wget http://www.sqlite.org/sqlite-autoconf-3070500.tar.gz tar xvzf sqlite-autoconf-3070500.tar.gz cd ...
- 【CF708E】Student's Camp 组合数+动态规划
[CF708E]Student's Camp 题意:有一个n*m的网格,每一秒钟,所有左面没有格子的格子会有p的概率消失,右面没有格子的格子也会有p的概率消失,问你t秒钟后,整个网格的上边界和下边界仍 ...
- MPU6050滤波、姿态融合（一阶互补、卡尔曼）
前几天做了6050原始数据的串口输出和上位机波形的查看.这篇博客我们来看一下对原始数据的处理. 任务:利用STC89C52RC对MPU6050原始数据进行滤波与姿态融合. 首先我摘抄了一段别人在昨晚这 ...
- Elasticsearch 索引、更新、删除文档
一.Elasticsearch 索引(新建)一个文档的命令: curl XPUT ' http://localhost:9200/test_es_order_index/test_es_order_t ...
- 关于webpy模板自动HTML转义的问题
注意: web.py 将会转义任何任何用到的变量,所以当你将 name 的值设为是一段 HTML 时,它会被转义显示成纯文本.如果要关闭该选项,可以写成 $:name 来代替 $name. 如果我们想 ...
- Spark Streaming 在数据平台日志解析功能的应用
https://mp.weixin.qq.com/s/bGXhC9hvDj4lzK7wYYHGDg 目前,我们使用Filebeat监控日志产生的目录,收集产生的日志,打到logstash集群,接入ka ...
- initrd和initramfs的区别
Linux内核在初始化之后会执行init进程,而init进程会挂载我们的根文件系统,但由于init程序也是在根文件系统上的,所以这就有了悖论.Linux采用两步走的方法来解决这个问题.Linux2 ...
- 单例模式：Qt本身就提供了专门的宏 Q_GLOBAL_STATIC 通过这个宏不但定义简单，还可以获得线程安全性
标题起的是有点大 主要是工作和学习中,遇到些朋友,怎么说呢,代码不够Qt化 可能是由于他们一开始接触的是 Java MFC 吧 接触 Qt 7个年头了 希望我的系列文章能抛砖引玉吧 单例模式 很多人洋 ...
- 钱币兑换问题--hdu1284（完全背包）
Problem Description 在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. Input 每行只有一个正整数N,N小于32768. ...