个人博客—用户注册
-
点击头部的注册按钮，弹出注册dialog
注册dialog 注册表单验证
-
账号、密码、邮箱输入格式不符合要求，在注册表单上面显示错误提示信息，且对应表单元素的边框和后面的必填标志变红色，注册表单高度随着提示信息的增加而增大，以避免出现滚动条。
输入格式不正确 -
账号输入格式正确后，当失去焦点时，向数据库验证用户名是否存在；已存在则提示错误信息，否则显示通过，表示输入合法且可用。
账号不得少于2位
账号被占用
输入合法且可用 -
邮箱输入时会自动提示和补全
自动提示和补全 -
生日输入框获得焦点则显示日期选择器
日期选择器
-
表单正确输入完成后，点击注册按钮，将表单提交给后台，将用户注册信息写入数据库。
提交前显示数据交互中dialog，提交成功后显示提交成功请登录dialog，并弹出登陆dialog。
同时，重置注册表单。
数据交互中
注册成功请登录
html代码
<!-- 用户注册弹窗 -->
<form id="reg" action="123.html" title="用户注册">
<ol class="reg_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="user" class="text" id="user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" />
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label></input><input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="birthday" readonly="readonly" class="text" id="date" />
</p>
</form>
<!-- /用户注册弹窗 -->
js代码
// 头部注册按钮点击弹出注册表单
$('#header .regbtn').on("click",function(){$('#reg').dialog("open")});
// 注册表单
$('#reg').dialog({
autoOpen : false,
modal : true,
resizable : false,
width : 320,
height : 340,
buttons : {
'注册' : function () {
$(this).submit();
}
}
}).buttonset().validate({ //buttonset设置单选按钮样式，validate验证注册表单
// 注册表单提交处理函数
submitHandler : function (form) {
reg_submit_fuc(form);
},
// 错误信息显示处理函数，每产生一个错误信息就将注册表单的高度增加20px
showErrors : function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors > 0) {
$('#reg').dialog('option', 'height', errors * 20 + 340);
} else {
$('#reg').dialog('option', 'height', 340);
}
this.defaultShowErrors();
},
// 高亮显示出错表单项，并重置其后的星号*
highlight : function (element, errorClass) {
$(element).css('border', '1px solid red');
$(element).parent().find('span').html('*').removeClass('succ');
},
// 输入正确则去除高亮显示，并替换其后星号*为成功标志
unhighlight : function (element, errorClass) {
$(element).css('border', '1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('succ');
},
// 错误提示信息显示位置设置
errorLabelContainer : 'ol.reg_error',
// 错误提示信息容器设置
wrapper : 'li',
// 验证规则设置
rules : {
user : {
required : true,
minlength : 2,
// 远程验证用户名是否已存在
remote : {
url : 'php/has_user.php',
type : 'POST',
},
},
pass : {
required : true,
minlength : 6,
},
email : {
required : true,
email : true
},
date : {
date : true,
},
},
// 错误提示信息设置
messages : {
user : {
required : '帐号不得为空！',
minlength : jQuery.format('帐号不得小于{0}位！'),
remote : '帐号被占用！',
},
pass : {
required : '密码不得为空！',
minlength : jQuery.format('密码不得小于{0}位！'),
},
email : {
required : '邮箱不得为空！',
minlength : '请输入正确的邮箱地址！',
},
}
});
function reg_submit_fuc(form){
$(form).ajaxSubmit({
url : 'php/add_user.php',
type : 'POST',
// 提交之前，显示loading数据交互中对话框，并禁用注册按钮
beforeSubmit : function (formData, jqForm, options) {
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
// 提交成功后，恢复注册按钮，显示loading注册成功请登录对话框，并设置cookie，
// 1秒钟后恢复loading的数据交互中对话框并关闭，重置注册表单并关闭，恢复注册表单后的星号*
success : function (responseText) {
if (responseText) {
$('#reg').dialog('widget').find('button').eq(1).button('enable');
$('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('注册成功请登录...');
setTimeout(function () {
$('#loading').dialog('close');
$('#reg').dialog('close');
$('#login').dialog('open');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('succ');
$('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');
}, 1000);
}
},
});
}
// 生日输入框设置
$('#date').datepicker({
changeMonth : true,
changeYear : true,
maxDate : 0,
yearRange : '1950:2020',
closeText: "关闭", // Display text for close link
prevText: "上月", // Display text for previous month link
nextText: "下月", // Display text for next month link
currentText: "今天", // Display text for current month link
monthNames: ["一月","二月","三月","四月","五月","六月",
"七月","八月","九月","十月","十一月","十二月"], // Names of months for drop-down and formatting
monthNamesShort: ["一月","二月","三月","四月","五月","六月",
"七月","八月","九月","十月","十一月","十二月"], // For formatting
dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], // For formatting
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], // For formatting
dayNamesMin: ["日","一","二","三","四","五","六"], // Column headings for days starting at Sunday
dateFormat: "yy-mm-dd", // See format options on parseDate
firstDay: 1, // The first day of the week, Sun = 0, Mon = 1, ...
});
// 邮箱的自动补全
$('#email').autocomplete({
delay : 0,
autoFocus : true,
source : function (request, response) {
var hosts = ['qq.com', '163.com', '162.com', 'sina.com.cn','gmail.com', 'hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名
host = '', //邮箱的域名
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
//当有@的时候，重新分别获得用户名和域名
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
//如果用户已经输入@和后面的域名，
//那么就找到相关的域名提示，比如123@1，就提示123@163.com
//如果用户还没有输入@或后面的域名，
//那么就把所有的域名都提示出来
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1
}) : hosts),
findedResult = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
result = result.concat(findedResult);
}
response(result);
},
});
php代码
判断用户名是否存在
<?php
require 'config.php';
$query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}'") or die('SQL 错误！');
if (mysql_fetch_array($query, MYSQL_ASSOC)) {
echo 'false';
} else {
echo 'true';
}
mysql_close();
?>
用户注册信息写入数据库
<?php
sleep(3);
require 'config.php';
$query = "INSERT INTO user (user, pass, email, sex, birthday, date)
VALUES ('{$_POST['user']}', sha1('{$_POST['pass']}'), '{$_POST['email']}', '{$_POST['sex']}', '{$_POST['birthday']}', NOW())";
mysql_query($query) or die('新增失败！'.mysql_error());
echo mysql_affected_rows();
mysql_close();
?>
<b><big>代码在Github：个人博客</big></b>
