<script src="../JS/jquery-1.3.2.js" type="text/javascript"></script> 这个js网上可以搜到
aspx页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserRegister.aspx.cs" Inherits="users_UserRegister2" %>
<!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">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/style_reg.css" />
<script src="../JS/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../JS/jquery-1.3.2.js" type="text/javascript"></script>
<%--<script src="../JS/jquery-1.2.6.js" type="text/javascript"></script>--%>
<script language="javascript" type="text/javascript" src="../JS/check.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap" >
<div id="title">
</div>
<div id="left_reg" style="width: 80%">
<div id="left_top" class="ext_corn_div">
</div>
<div id="form_content_left">
<p id="welcome">
!请填写以下表单以注册，打<span style="color: #F60;">*</span>的项目为必填。</p>
<div class="form_sec_title" id="form_title_01">
</div>
<div class="form_content" id="asasas">
<p class="form_title">
<span class="red_star">* </span>您的帐号：</p>
<div class="input_content">
<input type="text" runat="server" id="usrname" class="text_01" name="usrname" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>您要使用的昵称：</p>
<div class="input_content">
<input type="text" runat="server" id="nickname" class="text_01" name="nickname" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>您的E-mail：</p>
<div class="input_content">
<input type="text" id="mail" runat="server" class="text_01" name="mail"></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>您的联系电话：</p>
<div class="input_content">
<input type="text" runat="server" id="phone" class="text_01" name="phone"></div>
<div class="tips">
</div>
</div>
<div class="form_sec_title" id="form_title_02">
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>设定您的密码：</p>
<div class="input_content">
<input type="password" runat="server" id="passwd1" class="text_01" name="passwd" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>重复密码：</p>
<div class="input_content">
<input type="password" id="passwd2" runat="server" class="text_01" name="passwd" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>密码提示问题：</p>
<div class="input_content">
<input type="text" id="ask_pass" class="text_01" runat="server" name="ask_pass" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>问题答案：</p>
<div class="input_content">
<input type="text" id="ans_pass" class="text_01" name="ans_pass" runat="server" /></div>
<div class="tips">
</div>
</div>
<div class="form_sec_title" id="form_title_03">
</div>
<div class="form_content">
<p class="form_title">
您的真实姓名：</p>
<div class="input_content">
<input type="text" id="name" class="text_01" name="name" runat="server" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
性别：</p>
<div class="input_content">
<%--<input type="radio" class="sele_sex" name="sex" runat="server" /><p class="input_tip">
男</p>
<input type="radio" class="sele_sex" name="sex" runat="server" /><p class="input_tip">
女</p>--%>
<asp:DropDownList ID="dll_Sex" runat="server">
<asp:ListItem Value="0" Text="男"></asp:ListItem>
<asp:ListItem Value="1" Text="女"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
年龄：</p>
<div class="input_content">
<input type="text" id="age" class="text_01" name="age" runat="server"></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
您的个人主页：</p>
<div class="input_content">
<input runat="server" type="text" id="HomePage" class="text_01" name="HomePage" /></div>
<div class="tips">
</div>
</div>
<div class="form_content">
<p class="form_title">
您的QQ/MSN：</p>
<div class="input_content">
<input type="text" runat="server" id="qq" class="text_01" name="qq" /></div>
<div class="tips">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
</div>
<div class="form_content">
<p class="form_title">
所在省市：</p>
<%--<div class="input_content">
<input type="text" id="name" name="name" /></div>
<div class="tips">
</div>--%>
<asp:DropDownList ID="ddl_ProvinceId" runat="server" class="kinput" Width="120px">
</asp:DropDownList>
<asp:DropDownList ID="ddl_CityId" runat="server" class="kinput" Width="120px">
</asp:DropDownList>
</div>
<div class="form_content" style="height: 60px;">
<p class="form_title">
个人简介：</p>
<div class="input_content">
<input type="text" runat="server" id="ShortContent" class="text_01" name="per_int"
style="height: 50px;" /></div>
<div class="tips">
</div>
</div>
<div class="form_sec_title" id="form_title_04">
</div>
<div class="form_content">
<p class="form_title">
<span class="red_star">* </span>请输入验证码：</p>
<div class="input_content">
<input type="text" id="checkCode" runat="server" class="pass" name="checkCode" /><%--<div style="height: 20px;
width: 100px; float: left; background: #ccc; margin: 0 0 0 5px; display: inline;">--%>
<span style=" width:200px; color: #669900; text-decoration: underline; cursor: hand" οnclick="Javascript:var now=new Date();var number = now.getSeconds(); document.getElementById('ValidateCodeAuto').src='../ValidateCode/VCode.aspx?w=90&h=20&dd'+number;">
<img src="../ValidateCode/VCode.aspx?w=128&h=40" id="ValidateCodeAuto" width="80"
height="25" align="bottom" border="0" />看不清</span>
<%--</div>--%>
</div>
</div>
<div class="form_content">
<p class="form_title">
</p>
<div class="input_content">
<asp:LinkButton ID="submit_butt" runat="server" OnClick="submit_butt_Click1" ><span class="hidden">提交</span></asp:LinkButton><a
href="javascript:void(0)" id="reset"><span class="hidden">重置</span></a></div>
</div>
</div>
<div id="left_bott" class="ext_corn_div">
</div>
</div>
<div id="bottom">
</div>
<div style="clear: both; width: 760px; font-size: 0; height: 0;">
</div>
</div>
<script language="javascript" type="text/javascript">
var msgInfo = new Array(); //提示信息
var msgInfoUID = new Array('请认真填写您的账号，只能包含英文和数字', '账号不能为空，请输入', '您填写的账号已被占用，请重新输入', '恭喜您的账号可以注册', '用户名太短，用户名长度必须大于6位');
msgInfo[0] = new Array('请认真填写您的账号，只能包含英文和数字', '账号不能为空，请输入', '您填写的账号已被占用，请重新输入', '恭喜您的账号可以注册', '用户名太短，用户名长度必须大于6位');
msgInfo[1] = new Array('请填写您的昵称，这个是您在一丹医药网上的名字', '昵称不能为空，请输入');
msgInfo[2] = new Array('请填写您的Email，必填', '您填写的Email格式错误');
msgInfo[3] = new Array('请填写您的联系电话，这个是您的业务合作伙伴找到您的主要方式', '电话号码格式错误');
msgInfo[4] = new Array('请填写您的密码，请您牢记您的密码', '密码不能为空，请输入', '两次输入的密码不一致，请重新输入');
msgInfo[5] = new Array('请再次输入您的密码', '密码确认不能为空，请输入', '两次输入的密码不一致，请重新输入');
msgInfo[6] = new Array('请填写您的密码提示问题，这个是您找回密码的主要手段', '密码提示问题不能为空', '您填写的字数过多，请删减部分要求');
msgInfo[7] = new Array('请填写您的密码提示答案', '密码提示答案不能为空', '您填写的字数过多，请删减部分');
msgInfo[8] = new Array('请填写您的真实姓名，', '');
msgInfo[9] = new Array('请填写您的年龄，可以不填，默认为20', '年龄输入错误');
msgInfo[10] = new Array('请填写您的个人主页，可以不填', '填写错误，请重新输入');
msgInfo[11] = new Array('请填写您的QQ/MSN，可以不填', '填写错误，请重新输入');
msgInfo[12] = new Array('请填写您的个人简介，最多100个字', '您填写的字数过多，请删减部分要求');
var funCheck = new Array(); //事件数组，检测用户输入数据的合法性
funCheck[0] = function(str) { //帐号
if (isNotNull(str))
{ return 0; }
else { return 1; }
}
funCheck[1] = function(str) { //昵称
if (isNotNull(str)) {
return 0;
}
else { return 1; }
}
funCheck[2] = function(str) { //email
if (isEmail(str))
{ return 0; }
else { return 1; }
}
funCheck[3] = function(str) { //联系电话
if (isTel(str) || isPhone(str))
{ return 0; }
else { return 1; }
}
//--------
funCheck[4] = function(str) { //密码
if (isNotNull(str))
{ return 0; }
else { return 1; }
}
funCheck[5] = function(str) { //确认密码
if (isNotNull(str)) {
if ($("#passwd1").val() == $("#passwd2").val()) {
return 0;
} else {
return 2;
}
}
else { return 1; }
}
funCheck[6] = function(str) { //密码提示问题
if (str == null || str == "") { return 1; } else {
if (isSmall(str, 20)) { return 0; }
else { return 2; }
}
}
funCheck[7] = function(str) { //密码提示答案
if (str == null || str == "") { return 1; } else {
if (isSmall(str, 20)) { return 0; }
else { return 2; }
}
}
//------------
funCheck[8] = function(str) { //真实姓名
return 0;
}
funCheck[9] = function(str) { //年龄
if (str == "" || str == null) { return 0; }
if (str > 0 && str < 100) { return 0; } else { return 1; }
}
funCheck[10] = function(str) { //个人主页
return 0;
}
funCheck[11] = function(str) { //qq
return 0;
}
funCheck[12] = function(str) {//简介
if (isSmall(str, 100))
{ return 0; }
else { return 1; }
}
$(document).ready(function() {
var uid = false;
/*这个部分是实现选择不同的输入的时候，显示不同的提示信息*/
$(".text_01").focus(function() {
// alert($(this).parent().next("div").attr("class"));
$(this).parent().next("div").html(msgInfo[$(".text_01").index($(this)[0])][0]);
$(this).parent().next("div").removeClass();
$(this).parent().next("div").addClass("tips2");
});
$(".text_01").blur(function() {
//alert($(this).parent().next().html());
$(this).parent().next("div").html("");
$(this).parent().next("div").removeClass();
//alert($(this).attr("id"));
if ($(this).attr("id") == "usrname") {
if (isNotNull(this.value)) {//如果用户名不为空
if (isSmall(this.value, 6))//如果用户名小于6位
{
$(this).parent().next("div").removeClass();
$(this).parent().next("div").addClass("wrong");
$(this).parent().next("div").html("<img src='../img/zhaoshang2/zhao2_06.gif' border='0' />" + msgInfoUID[4]);
// $(this).parent().next("div").html(msgInfoUID[4]);
uid = false;
}
else {
if (isUID(this.value)) {
var flag = 0;
//alert(1);
var murl = "../ashx/RegisterCheck.ashx?&name=" + encodeURI($("#usrname").val());
$.ajax(
{
type: "GET",
url: murl,
data: "",
//async:false,//同步请求，只有请求完成之后才能进行其他操作
success: function(result) {
var isUsed = result;
//alert(isUsed);
if (isUsed == "false") {//可以注册
//alert("可以注册");
$($("#usrname")).parent().next("div").removeClass();
$($("#usrname")).parent().next("div").html(msgInfoUID[3]);
$($("#usrname")).parent().next("div").addClass("right");
uid = true;
//alert(isUsed);
}
else {//用户名已经被注册
//alert("用户名已经被注册");
//alert($(".text_01").index($(this)[0]));
$($("#usrname")).parent().next("div").removeClass();
$($("#usrname")).parent().next("div").addClass("wrong");
$($("#usrname")).parent().next("div").html("<img src='../img/zhaoshang2/zhao2_06.gif' border='0' />" + msgInfoUID[2]);
//alert($(this).parent().next("div").attr("class"));
// alert($(this).html());
uid = false;
}
}
});
}
else {
//alert(2);
$($("#usrname")).parent().next("div").removeClass();
$($("#usrname")).parent().next("div").html(msgInfoUID[0]);
$($("#usrname")).parent().next("div").addClass("wrong");
uid = false;
}
}
}
else {
// alert(3);
$($("#usrname")).parent().next("div").removeClass();
$($("#usrname")).parent().next("div").html(msgInfoUID[1]);
$($("#usrname")).parent().next("div").addClass("wrong");
uid = false;
}
}
if (funCheck[$(".text_01").index($(this)[0])]($(this)[0].value) == 0) {
//alert(4);
if ($(".text_01").index($(this)[0]) != 0 && $(".text_01").index($(this)[0]) != -1) {
//alert(5);
$(this).parent().next("div").removeClass("wrong");
$(this).parent().next("div").removeClass("tips2");
}
}
else {
//alert(2);
///alert($(".text_01").index($(this)[0]));
$(this).parent().next("div").html("<img src='../img/zhaoshang2/zhao2_06.gif' border='0' />" + msgInfo[$(".text_01").index($(this)[0])][funCheck[$(".text_01").index($(this)[0])]($(this)[0].value)]);
$(this).parent().next("div").addClass("wrong");
}
//alert(funCheck[$(".kinput").index($(this)[0])]($(this)[0].value));
});
/*是否存在验证*/
$("#submit_butt").click(function() {//点击报错的时候，验证数据是不是全部合法，如果全部合法，则提交，否则return false；
var isCheck = true;
// alert(0);
$(".text_01").each(function(j) {
if (j <= 7)
$($(".text_01").get(j)).blur();
});
$(".wrong").each(function(i) {
isCheck = false;
});
// if ($("#usrname").val() == "") {
// isCheck = false
// }
if (isCheck == false) {
alert("请按照要求填写带(*)号的项");
}
return isCheck;
})
// $(document).click(function() {
$("#wrap").show(5000);
$("#wrap").fadeOut(1000);
// })
})
</script>
</form>
</body>
</html>
<script language="javascript" type="text/javascript" src="../JS/check.js"></script> 这个文件如下
/*
限制输入字符的位数
str是用户输入字符串，len是要限制的位数
----------------------------
*/
function isSmall(str,len){
if (str.length<len){
return(true);
}else{
return(false);
}
}
/*判断两个字符串是否一致
---------------------------------
*/
function isSame(str1,str2){
if (str1==str2){
return(true);
}else{
return(false);
}
}
/*
判断字符串是否为空开始
---------------------------------
*/
function isNotNull(str){
if (str.length==""){
return(false);
}else{
return(true);
}
}
/*
判断是不是手机号码
---------------------------------
*/
function isPhone(str){
reg=/^[0]?13/d{9}$/gi;
reg2=/^[0]?15/d{9}$/gi;
if(!reg.test(str)&&!reg2.test(str)){
return false;
}
return true;
}
/*
判断用户名是否不包含汉字
（用户名不能为汉字，也不准带有特殊字符）
注：
正则表达式.test() 方法用于检测一个字符串是否匹配某个模式
---------------------------------
*/
function notChinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true);
}
}
/*
判断是否为日期
----------------------------------
*/
function isDate (theStr) {
var the1st = theStr.indexOf('-');
var the2nd = theStr.lastIndexOf('-');
if (the1st == the2nd) {
return(false);
}
else {
var y = theStr.substring(0,the1st);
var m = theStr.substring(the1st+1,the2nd);
var d = theStr.substring(the2nd+1,theStr.length);
var maxDays = 31;
if (fucCheckNUM(m)==false || fucCheckNUM(d)==false || fucCheckNUM(y)==false) {
return(false); }
else if (y.length < 4) { return(false); }
else if ((m<1) || (m>12)) { return(false); }
else if (m==4 || m==6 || m==9 || m==11) maxDays = 30;
else if (m==2) {
if (y % 4 > 0) maxDays = 28;
else if (y % 100 == 0 && y % 400 > 0) maxDays = 28;
else maxDays = 29;
}
if ((m<1) || (m>maxDays)) { return(false); }
else { return(true); }
}
}
/*
判断是否为数字
---------------------------------------
*/
function isNum(num){
var i,j,strTemp;
strTemp="0123456789";
if ( num.length== 0){
return false;
}
for (i=0;i<num.length;i++){
j=strTemp.indexOf(num.charAt(i));
if (j==-1){//说明有字符不是数字
return false;
}
}
return true;//说明是数字
}
/*
判断是否为固定的位数
-------------------------
*/
function isAtn(str,n){
if (str.length!=n){
return(false);
}
else{
return(true);
}
}
/*
判断是否为电话号码开始（已经完成）
--------------------------
*/
function isTel(telstr)
{
var reg1=/(/(/d{3}/)|/d{3}-)?/d{8}/g;//八位电话号码
var reg2=/(/(/d{3}/)|/d{3}-)?/d{7}/g;//七位电话号码
if (telstr!="") {
if (reg1.test(telstr)||reg2.test(telstr)){
return(true);
}
else{
return(false);
}
}else{return(false);}
}
/*
判断是否为email【最简单的，验证是否有@和.】（已经完成）
---------------------------
*/
function isEmail(emailstr) {
/*-------------------
if ((emailstr.indexOf('@', 0) == -1) || emailstr.indexOf('.') == -1) {
return false;
}
else {
return true;
}
---------------------*/
var reg=//w+([-+.']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*/i;
if (emailstr!="") {
if (reg.test(emailstr)){
return(true);
}
else{
return(false);
}
}
else{
return(false);
}
}
/*
判断是否为邮政编码
---------------------------
*/
function isPostCode(str) {
var reg=//d{6}/g;
if (str!="") {
if (reg.test(str)){
return(true);
}
else{
return(false);
}
}
else{
return(false);
}
}
/*
中文汉字输入判断
---------------------------
*/
function isChinese(str){
//如果值为空，不通过校验
if (str == "")
return false;
var pattern = /^([/u4E00-/u9FA5]|[/uFE30-/uFFA0])*$/gi;
if (pattern.test(str))
return true;
else
return false;
}
/*判断用户名是不是包含大小写字母数字和_*/
function isUID(str){
var jgpattern =/^[A-Za-z0-9_]+$/;
var huzhaocard = str;
if(!jgpattern.test(huzhaocard))
{
return false;
}
else
{
return true;
}
}
//判断是不是网址
function isHttp(str)
{
var pattern=/^(http:)?[a-zA-Z0-9-]+(/.[a-zA-z0-9-]+)+//?$/gi;
if(pattern.test(str))
{
return true;
}
else
{
return false;
}
}
<link rel="stylesheet" type="text/css" href="../css/style_reg.css" /> 这个样式如下
@charset "gb2312";
/* CSS Document */
body{margin:0; padding:0; color:#000; font-size:12px; background:#ecf4fe;}
.hidden{display:none;}
#wrap{width:760px; margin:0px auto; padding:0 5px 5px 5px; border:1px solid #ccc; background:#fff;}
#title{width:760px; height:80px; background:url(../images/logo.gif) no-repeat top left #fff; float:left; margin:0 0 10px 0;}
#left_reg{width:740px; float:left; padding:0 10px 0 10px;}
.ext_corn_div{width:740px; float:left; height:10px; font-size:0px;}
#left_top{background:url(../images/images/main_reg_bkg_01.gif) no-repeat top center;}
#welcome{margin:0; padding:10px 15px 10px 15px; width:480px; float:left; color:#69c; font-weight:bold; font-size:120%;}
#left_bott{background:url(../images/images/main_reg_bkg_03.gif) no-repeat bottom center; height:20px;}
#form_content_left{width:720px; float:left; background:url(../images/images/main_reg_bkg_02.gif) repeat-y center center; padding:0 10px 0 10px;}
.form_sec_title{width:508px; height:38px; float:left; margin:10px 0 10px 0;}
#form_title_01{background:url(../images/reg_step_title.gif) no-repeat center center;}
#form_title_02{background:url(../images/reg_step_title_02.gif) no-repeat center center;}
#form_title_03{background:url(../images/reg_step_title_03.gif) no-repeat center center;}
#form_title_04{background:url(../images/reg_step_title_04.gif) no-repeat center center;}
.form_content{width:720px; float:left; margin:5px 0 5px 0;}
.form_title{margin:0; padding:8px 10px 0 0; width:140px; height:17px; float:left; text-align:right; color:#069; font-weight:bold;}
.red_star{color:#F60; font-weight:bold;}
.input_content{width:210px; height:22px; float:left; padding:3px 0 0 0;}
.text_01{width:200px; float:left; border:1px solid #69c;}
.pass{width:69px; float:left; border:1px solid #69c;}
.input_tip{margin:0; padding:0; float:left; padding:4px 5px 0 5px;}
.sele_sex{float:left;}
#age{width:60px; float:left; border:1px solid #69c;}
/*.tips{width:340px; height:25px; float:right; background:#ffffff; border-width:1px; border-color:Blue; border-style:solid;}*/
.tips2{float:left; margin-top:5px; background:#D8E6FE;border:#3366FF solid 1px;font-weight:normal;font-size:12px;}
.wrong{float:left;margin-top:5px;background:#FEE2ED;border:#FF0000 solid 1px;font-weight:normal;font-size:12px;}
.right{float:left;margin-top:5px;background:#E1FEDA;border:#33CC00 solid 1px;font-weight:normal;font-size:12px;}
#submit_butt{width:120px; height:22px; float:left; display:block; background:url(../images/sub_button_bkg.gif) no-repeat center center; margin:0 10px 0 0;}
#reset{width:60px; height:22px; float:left; display:block; background:url(../images/reset_butt_bkg.gif) no-repeat center center;}
#right_reg_ext_int{width:245px; padding:0 0 0 5px; float:left; height:600px;}
.right_mod_ext{width:245px; float:left;}
.right_ext_title{margin:0; padding:15px 0 5px 15px; width:230px; height:20px; float:left; background:url(../images/right_ext_bkg_01.gif) no-repeat top center; font-size:120%; font-weight:bold; color:#69c;}
.right_ext_content{margin:0; padding:0; float:left; width:245px; background:url(../images/right_ext_bkg_02.gif) repeat-y center center;}
.right_ext_content li{list-style:none; float:left; padding:7px 0 8px 30px; width:213px; background:url(../images/Knob-Valid-Green.gif) no-repeat left center; margin:0 1px 0 1px; display:inline;}
.right_ext_content li a{color:#000; text-decoration:none; color:#999; font-weight:bold;}
.right_ext_bottom{width:245px; height:10px; float:left; background:url(../images/right_ext_bkg_03.gif) no-repeat bottom center;}
#bottom{width:760px; float:left;}
扫一扫
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
