一、用户注册与验证（JavaScript实现--自学）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function check(){
var user = document.form1.userId.value; 
var pass = document.form1.password1.value; 
var rePass = document.form1.password2.value;
var email=form1.email.value;
var tel1=form1.tel1.value;
var tel2=form1.tel2.value;
var age=form1.age.value;

if(parseInt(user)>0) {
        alert("不能全为数字"); 
        form1.userId.focus(); 
        return false;}
if(user.length > 16 || user.length < 4){ 
        alert("账号长度必须大于等于4,小于等于16"); 
        form1.userId.focus(); 
        return false; 
}else if(isFirst()){ 
    alert("账号头字母不能为数字"); 
    form1.userId.focus(); 
    return false; 
}else if(isSpace()){ 
    alert("账号只能包含字母,数字,下划线'_'!"); 
    form1.userId.focus(); 
        return false; 
} 
else if(pass.length < 1){ 
    alert("请输入密码"); 
    form1.password1.focus(); 
    return false; 
}else if(pass != rePass){ 
    alert("两次密码输入不相符合!"); 
    form1.password2.focus(); 
    return false; 
} else if(email.indexOf('@')<1){
 alert("邮箱格式不对！！");
 form1.email.focus();
 return false;
}else if(isNaN(age))
{
  alert('请输入数字!');
  form1.age.focus();
  return false;
}

    return true; 
}

function isSpace(){ 
 
    var name = document.form1.userId.value.split(" "); 
     
    for(i= 0;i<name.length;i++){ 
        if(name[i]==""){ 
            return true; 
        }else if( !((name[i]<"z" && name[i] >"a")||(name[i] <"Z"&&name[i]>"A")  
        ||name[i] =="_"||(name[i]< "9" && name[i]>"0"))){ 
            return true; 
        }         
    } 
    return false; 
} 
 
 
function isFirst(){ 
    var name = document.form1.userId.value.split(""); 
    if(name[0] < "9" && name[0] > "0"){ 
        return true; 
    } 
    return false; 
} 
</script>
</head>

<body>
<form id="form1" name="form1" method="post" onSubmit="return check();" action="doReg.jsp">
  <table border="0" class="fontstyle">
    <tr>
      <td colspan="3"><h2>用户注册</h2><hr></td>
    </tr>
    <tr>
      <td width=69>账&nbsp;&nbsp;号*：</td>
      <td width="197"><input name="userId" type="text" id="userId" size="20"  onFocus=""/></td>
      <td width="220">4-16个字符，由字母或数字、下划线，首字母不能为数字，不可全为数字</td>
    </tr>
    <tr>
      <td>密&nbsp;&nbsp;码*：</td>
      <td><input name="password1" type="text" id="password1" size="20" /></td>
      <td>4-16个字符，由字母或数字，不可全为数字</td>
    </tr>
    <tr>
      <td >确认密码*：</td>
      <td><input name="password2" type="text" id="password2" size="20" /></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>呢&nbsp;&nbsp;称：</td>
      <td><input name="name" type="text" id="name" size="20" /></td>
      <td>4-20个字符，由字母、数字和下划线组成（可中文），不可全为数字</td>
    </tr>
    <tr>
      <td>性&nbsp;&nbsp;别：</td>
      <td><input name="sex" type="radio"  value="男" checked="checked" />
        男
      <input type="radio" name="sex" value="女" />
      女</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>年&nbsp;&nbsp;龄：</td>
      <td><label for="age"></label>
      <input name="age" type="text" id="age" size="3" maxlength="3" /></td>
      <td>16-100岁</td>
    </tr>
    <tr>
      <td>喜欢商品：</td>
      <td><input class="size" type="checkbox" name="aihao" value="图书" />
        图书
          <input type="checkbox" name="aihao" value="电子产品" />
          电子产品
          <input type="checkbox" name="aihao" value="衣服"  />
        衣服
        <br/>
        <input type="checkbox" name="aihao" value="箱包"  />
        箱包       
        <input type="checkbox" name="aihao" value="饰品"/>
        饰品</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>邮&nbsp;&nbsp;箱*：</td>
      <td><input name="email" type="text" id="email" size="20" /></td>
      <td>格式如XX@sina.com</td>
    </tr>
    <tr>
      <td>手&nbsp;&nbsp;机*：</td>
      <td><input name="tel1" type="text" id="tel1" size="20" /></td>
      <td>格式如13562276780</td>
    </tr>
    <tr>
      <td>办公电话：</td>
      <td><input name="tel2" type="text" id="tel2" size="20" /></td>
      <td>格式如0546-8083321</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" name="submit" id="submit" value="提交" />
      <input type="reset" name="reset" id="reset" value="重置" /></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

二、正则表达式验证

 wKioL1VLc8eB875dAANJEAuPxAg761.jpg

用户名：username,密码:password,确认密码：password2,邮箱：user_email,qq:user_qq,手机：user_tel,性别：user_sex，学历：user_xueli，爱好：user_hobby，简介user_introduce



function checkname(){
    var reg =/^[a-zA-Z]\w{5,17}$/;
    var val = document.zhuce.username.value;
    if(!reg.test(val)){
    document.getElementById("name_msg").style="color:red;";
    　   //  　alert("注册帐号只能以字母开头，长度在6-18之间，只能包含字符、数字和下划线！");
     　    　document.zhuce.username.focus();
             return false;
     }
}

用户名:6-18位只能包含字符、数字和下划线

var reg =/^[a-zA-Z]\w{5,17}$/;

密码：6-20位，只能包含字符、数字和下划线

reg =/^[A-Za-z0-9]{6,20}$/;

QQ号码:var reg=/^[1-9]\d{4,9}$/;

邮箱:var reg=/^[\w_]+@\w+(\.\w+)+$/;

手机：var reg=/^1\d{10}$/;

三、存储到数据库

【预备知识】

1、连接到MySQL数据库

　$conn=mysql_connect("localhost","root","") or die ("数据库服务器连接失败");

2、选择数据库

mysql_select_db("db_shop",$conn) or die("数据库访问错误"); 

3、执行SQL查询语句

mysql_query("set names gb2312");    //设置客户端字符集为gb2312

$SQL="select * from tb_type";

$result=mysql_query($SQL);       //将SQL语句发送到数据库执行并返回结果资源

4、逐行获取数据

while($row=mysql_fetch_array($result))    //逐行获取类别表数据

　　{

echo $row['typeid'];     //输出类别号

echo $row['typename'];    //输出类别名称

echo "<br />";

　　}

5、统计查询结果的记录集数

echo $num=mysql_num_rows($result);    //统计类别的数量



四、用户登陆（数据库访问）


五、管理界面UI