使用html，css，javascript进行注册页面的实现

注册页面的实现

功能

• 实现一个用户注册页面
• 实现表单校验功能

效果图

实现步骤

1) 创建Resign.html注册页面

核心代码：

    

        新会员注册

        

            

                
会员邮箱:
                

                

                

                    
            
            

                
会员名:
                

                

                
    
            
            

                
密码: 
                

                

                
    
            
            

                
置复密码:
                

                

                
    
            
            

                
性别:
                

                
  
                    
                    男
                       
                    
                     女
                
                

            
            

                
联系电话:
                

                
 
                
    
            
            

                
个人介绍:
                

                

                
                
                

            
            

                

                    
                
            
        
    

先通过

标签来创建一个表单，
其中的属性onsubmit用于限制表单提交，如果得到为false则提交不会进行。
再在表单中来创建一个表格来用于对表单中的各个组件的布局设计，表格一共四列
第一列用于填写例如姓名,电话号码,邮箱之类的属性来提示用户需要填写什么，
第二列设置了一列空表格让表格可以看上去更加美观，
第三列是用于客户填写信息的输入框,
第四列是提示用户填入信息的格式，
由于"个人介绍"栏目的信息不做要求，对这一行的输入框的单元格和提示的单元格进行了合并。
之后的提交按钮则单独一列合并四个单元格，然后通过padding的偏移将其调整到适当位置
在标签中的属性值type用于设置输入框的类型，
onclick设定点击这个组件触发的函数，onKeyUp设定每次点击键盘触发的函数

相应css代码(register.css)：

/*注册表样式*/
#div_register{
  width: 70%;
  margin-left: 15%;
  height: 500px;
  background-color: papayawhip;
}

#resignHead{
  position: absolute;
  font-family: 黑体,sans-serif;
  font-size: 24px;
  font-weight: bolder;
  margin-left: 80px;
  margin-top: 30px;
}

#div_register table{
  margin-top: 50px;
  margin-left: 100px;
  padding-top: 4px;
  font-family: 仿宋,sans-serif;
  font-weight: bolder;
}

#submitButton{
  font-size: 24px;
  font-weight: bolder;
  color: whitesmoke;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  background-color: lightgreen;
  border-color: lightgreen;
  border-width: 5px;
}

#submitButton:hover{
  background-color: greenyellow;
}

其他对表格和其中字体的设置都比较简单
主要是对表格中的按钮进行设置，设置了按钮边框颜色和和按钮主要颜色

2) 实现表单校验功能

校验功能有js代码进行实现
对应js代码(register.js)

//输入的数据
var emailObj
var usernameObj
var passwordObj
var confirmObj
var telephoneObj
//提示信息
var emailMsg
var usernameMsg
var passwordMsg
var confirmMsg
var telephoneMsg

window.onload = function() {
    // 页面加载之后, 获取页面中的对象
    emailObj = document.getElementById("email");
    usernameObj = document.getElementById("username");
    passwordObj = document.getElementById("password");
    confirmObj = document.getElementById("rePassword");
    telephoneObj = document.getElementById("telephone")

    emailMsg = document.getElementById("emailMsg");
    usernameMsg = document.getElementById("usernameMsg");
    passwordMsg = document.getElementById("passwordMsg");
    confirmMsg = document.getElementById("confirmMsg");
    telephoneMsg = document.getElementById("telephoneMsg");
}

function check(Regex,Obj,Msg,s1,s2){
    var Value = Obj.value;
    var msg = "可用";
    if (!Value){
        msg = s1;
    }else if(!Regex.test(Value)){
        msg = s2;
    }
    Msg.innerHTML = msg;
    Obj.parentNode.parentNode.style.color= msg === "可用" ? "black" : "red";
    return msg === "可用";
}

function checkEmail() {
    var Regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
    var S1 = "邮箱必须填写。"
    var S2 = "邮箱输入不合法。"
    return check(Regex,emailObj,emailMsg,S1,S2);
}

function checkUsername() {
    var Regex = /^[a-zA-Z_][0-9a-zA-Z_]{0,9}$/;
    var S1 = "用户名必须填写,为字母数字下划线1到10位,不能数字开头"
    var S2 = "用户名输入不合法:字母数字下划线1到10位,不能数字开头"
    return check(Regex,usernameObj,usernameMsg,S1,S2);
}

function checkPassword() {
    var Regex = /^[\S]{6,16}$/;
    var S1 = "密码必须填写,设置6-16位字符"
    var S2 = "密码输入不合法:设置为6-16位字符"
    return check(Regex,passwordObj,passwordMsg,S1,S2);
}

function checkConfirm() {
    var value = confirmObj.value;
    var msg = "";
    if (!value){
        msg = "确认密码不能为空!";
    } else if(!(value === passwordObj.value)){
        msg = "重复密码输入有误,请重填"
    }
    confirmMsg.innerHTML = msg;
    confirmObj.parentNode.parentNode.style.color= msg === "" ? "black" : "red";
    return msg === "";
}

function checkTelephone() {
    var Regex = /^[1]+[3,8]+\d{9}$/;
    var S1 = "电话号码必须填写"
    var S2 = "电话号码输入有误,请重填"
    return check(Regex,telephoneObj,telephoneMsg,S1,S2);
}

function checkForm() {
    // 验证整个表单
    var bEmail = checkEmail();
    var bUsername = checkUsername();
    var bPassword = checkPassword();
    var bConfirm = checkConfirm();
    var bTelephone = checkTelephone();
    return bUsername && bPassword && bConfirm && bEmail && bTelephone && check;
    // return false后,事件将被取消
}

js主要负责对表单中的数据进行验证，
checkForm()函数用于判断是否所有的输入框的输入都正确，以此返回true或者false来表示表单是否进行提交和跳转，
check(Regex,Obj,Msg,s1,s2)通过判断某一个输入框是否正确来判断使用什么颜色的字体以及输出什么的提示文本。
其他的判断函数则通过调用上述的check函数来实现操作。
验证重复密码是否正确的函数：checkConfirm()则通过对比输入密码文本框的值passwordObj.value和重复密码文本框的值confirmObj.value来判断输出的文本和颜色。

最后判断的效果图：