<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" type="text/css" href="./css/basic.css">
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<!-- <link rel="stylesheet" type="text/css" href="./css/main.css"> -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div class="register_con">
<div class="l_con fl">
<a class="reg_logo"><img src="./images/base-img/logo.jpg"></a>
<div class="reg_slogan">足不出户 · 新鲜每一天</div>
<div class="reg_banner"></div>
</div>
<div class="r_con fr">
<div class="reg_title clearfix">
<h1>用户注册</h1>
<a href="login.html">登录</a>
</div>
<div class="reg_form clearfix">
<!-- action="/user/register_handle/" -->
<form action="" id="reg_form" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="8kdqyd8BIhAFED8es0Zrd1dZs2VShk5YVAyujeFZyKze2reEwjwrtBAyPZfv2sQB">
<ul>
<li>
<label>用户名:</label>
<input type="text" name="user_name" id="user_name">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>密码:</label>
<input type="password" name="pwd" id="pwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>确认密码:</label>
<input type="password" name="confirm_pwd" id="cpwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>邮箱:</label>
<input type="text" name="email" id="email">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>电话:</label>
<input type="text" name="phone" id="phone">
<span class="error_tip">提示信息</span>
</li>
<li class="agreement">
<input type="checkbox" name="allow" id="allow" checked="checked">
<label>同意《小毛虫生鲜用户使用协议》</label>
<span class="error_tip2" style="display: none;">请勾选同意</span>
</li>
<li class="reg_sub">
<input type="submit" class="input_sunmit" value="注 册">
</li>
</ul>
</form>
</div>
</div>
</div>
<!-- 底部 -->
<script type="text/javascript" src="./js/register.js"></script>
<script type="text/javascript">
$(function(){
var error_name = false;
var error_password = false;
var error_check_password = false;
var error_email = false;
var error_phone=false;
var error_check = false;
$('#user_name').blur(function() {
check_user_name();
});
$('#pwd').blur(function() {
check_pwd();
});
$('#cpwd').blur(function() {
check_cpwd();
});
$('#email').blur(function() {
check_email();
});
$('#phone').blur(function() {
check_phone();
});
$('#allow').click(function() {
if($(this).is(':checked'))
{
error_check = false;
$(this).siblings('span').hide();
}
else
{
error_check = true;
$(this).siblings('span').html('请勾选同意');
$(this).siblings('span').show();
}
});
function check_user_name(){
var len = $('#user_name').val().length;
if(len<2||len>20)
{
$('#user_name').next().html('输入用户名');
$('#user_name').next().show();
error_name = true;
}
else{
$.ajax({
url:"http://127.0.0.1:3000/checkname",
type:"get",
data:{
name:$('#user_name').val(),
},
dataType:"json"
})
.then(function(result){
if(result.status==1){
$('#user_name').next().html('用户名已经存在').show();
error_name = true;
}else{
$('#user_name').next().hide();
error_name = false;
}
})
}
}
function check_pwd(){
var len = $('#pwd').val().length;
if(len<4||len>20)
{
$('#pwd').next().html('密码最少4位，最长20位');
$('#pwd').next().show();
error_password = true;
}
else
{
$('#pwd').next().hide();
error_password = false;
}
}
function check_cpwd(){
var pass = $('#pwd').val();
var cpass = $('#cpwd').val();
if(pass!=cpass)
{
$('#cpwd').next().html('两次输入的密码不一致');
$('#cpwd').next().show();
error_check_password = true;
}
else
{
$('#cpwd').next().hide();
error_check_password = false;
}
}
function check_email(){
var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{
2,5}){
1,2}$/;
if(re.test($('#email').val()))
{
$('#email').next().hide();
error_email = false;
}
else
{
$('#email').next().html('你输入的邮箱格式不正确');
$('#email').next().show();
error_email = true;
}
}
function check_phone(){
var res=/^1[3,4,5,7,8]\d{
9}$/;
if(res.test($('#phone').val())){
$('#phone').next().hide();
error_phone = false;
}else{
$('#phone').next().html('你输入的号码格式不正确');
$('#phone').next().show();
error_phone = true;
}
}
$('#reg_form').submit(function() {
check_user_name();
check_pwd();
check_cpwd();
check_email();
if(error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false)
{
return true;
}
else
{
return false;
}
});
});
</script>
</body>
</html>