网页开发基础

传智书城注册页面设计

创建register.html注册页面：

在client文件夹中创建注册页面register.html，其中，注册页面引用的CSS样式文件和JS脚本文件代码如下所示。

实现注册功能的主要代码 register.html

 

 

 

 当页面信息全部填写完成并通过校验后，单击“同意并提交”按钮后，会提交到<form>标签中action属性指定的registersuccess.html页面，该页面用于表示用户注册成功。其页面主要代码如下所示。

 创建form.js文件，实现表单校验功能

代码如下：

 
//1.声明变量
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
 
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
 
window.onload = function() {    // 页面加载之后, 获取页面中的对象
    emailObj = document.getElementById("email");
    usernameObj = document.getElementById("username");
    passwordObj = document.getElementById("password");
    confirmObj = document.getElementById("repassword");
 
    emailMsg = document.getElementById("emailMsg");
    usernameMsg = document.getElementById("usernameMsg");
    passwordMsg = document.getElementById("passwordMsg");
    confirmMsg = document.getElementById("confirmMsg");
};
 
function checkForm() {            // 验证整个表单
    var bEmail = checkEmail();
    var bUsername = checkUsername();
    var bPassword = checkPassword();
    var bConfirm = checkConfirm();
    return bUsername && bPassword && bConfirm && bEmail ;    // return false后, 事件将被取消
}
 
 
function checkEmail() {            // 验证邮箱
    var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
    var value =emailObj.value;
    var msg = "";
    if (!value)
        msg = "邮箱必须填写：";
    else if (!regex.test(value))
        msg = "邮箱格式不合法：";
    emailMsg.innerHTML = msg;
    emailObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
    return msg == "";
}
 
 
function checkUsername() {        // 验证用户名
    var regex = /^[a-zA-Z_]\w{0,9}$/;    // 字母数字下划线1到10位, 不能是数字开头
    var value = usernameObj.value;// 获取usernameObj中的文本
    var msg = "";                        // 最后的提示消息, 默认为空
    if (!value)                            // 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false
        msg = "用户名必须填写：";            // 改变提示消息
    else if (!regex.test(value))        // 如果用户名不能匹配正则表达式规则
        msg = "用户名不合法：";            // 改变提示消息
    usernameMsg.innerHTML = msg;        // 将提示消息放入SPAN
    usernameObj.parentNode.parentNode.style.color = msg == "" ? "black" : "red";    // 根据消息结果改变tr的颜色
    return msg == "";                    // 如果提示消息为空则代表没出错, 返回true
}
 
function checkPassword() {        // 验证密码
    var regex = /^.{6,16}$/;            // 任意字符, 6到16位
    var value = passwordObj.value;
    var msg = "";
    if (!value)
        msg = "密码必须填写：";
    else if (!regex.test(value))