HTML、JavaScript和CSS实现注册页面设计

一、实现要求

二、实现页面图

1、注册页面

2.用户ID、用户名、口令验证成功后显示页面

三、用户ID、用户名、口令、确定口令验证逻辑js代码

1、验证用户ID

2、验证用户名

3、验证口令密码

四、总结

五、代码仓库

一、实现要求

综合使用HTML、JavaScript和CSS进行注册页面设计，实现以下若干功能：

1.注意整个页面的色调和美观

2.使用Frameset+Table布局（div也可）

3.对用户ID和用户名、口令不符合条件及时判断

4.对口令不一致进行及时判断（34的及时判断，要求提示信息必须显示在同一个页面，也就是说显示在当前的行的后面或者上面或者下面）

5.判断Email地址是否合法

6.在“提交”后能在新页面显示所有的输入信息

二、实现页面图

1、注册页面

2.用户ID、用户名、口令验证成功后显示页面

三、用户ID、用户名、口令、确定口令验证逻辑js代码

1、验证用户ID

用户ID使用正则表达式

var reg_userid = /^\w{6,8}$/; // 正则表达式匹配6到8位的字母数字字符或下划线

  function checkUserID() {var userID = document.getElementById("userid").value;var reg_userid = /^\w{6,8}$/; // 正则表达式匹配6到8位的字母数字字符或下划线var flag = reg_userid.test(userID);console.log(flag);var s_userid = document.getElementById("s_userid");if (flag) {s_userid.innerHTML = "<img width='35' height='25' src='./gou.png'/>";s_userid.className = 'valid'; // 可选：改变类名以更改样式} else {s_userid.innerHTML = "用户ID格式有误";s_userid.className = 'error'; // 可选：保持错误提示的样式类名}return flag;}

2、验证用户名

用户名对应正则表达式

var reg_username = /^\w{6,12}$/; // 正则表达式匹配6到12位的字母数字字符或下划线

    function checkUsername() {var username = document.getElementById("username").value;var reg_username = /^\w{6,12}$/;var flag = reg_username.test(username);var s_username = document.getElementById("s_username");if (flag) {s_username.innerHTML = "<img width='35' height='25' src='./gou.png'/>";}else {s_username.innerHTML = "用户名格式有误";} return flag;}

3、验证口令密码

在验证口令密码区域，将确认口令进行验证，当password和repassword内容不一致时，则进行错误提示。校验通过时，则显示校验成功的图片。

  // 验证口令密码function checkPassword() {var password = document.getElementById("password").value;var repassword = document.getElementById("repassword").value;var userid = document.getElementById("userid").value;var reg_password = /^\S{6,8}$/; // 正则表达式匹配6到8位的非空白字符var flag = reg_password.test(password);var s_password = document.getElementById("s_password");var s_repassword = document.getElementById("s_repassword");// 清除之前的错误信息s_password.innerHTML = '';s_repassword.innerHTML = '';if (!flag) {s_password.innerHTML = "口令格式有误（6-8位，不能包含空格）";return false;} else if (password !== repassword) {s_repassword.innerHTML = "两次输入的口令不一致";return false;} else if (password === userid) {s_password.innerHTML = "口令不能与用户ID相同";return false;}// 如果没有错误，则显示正确提示s_password.innerHTML = "<img width='35' height='25' src='./gou.png'/>";s_repassword.innerHTML = "<img width='35' height='25' src='./gou.png'/>";return true;}

4、window.onload 页面加载完成之后执行

三个对应的校验内容在window.onload 页面加载完成之后执行。

    window.onload = function () {// window.onload 页面加载完成之后执行   document.getElementById("form").onsubmit = function () {return checkUsername() && checkPassword();};// 对用户ID和用户名、口令不符合条件及时判断document.getElementById("userid").onblur = checkUserID;document.getElementById("username").onblur = checkUsername;// 在输入框失去焦点时触发验证document.getElementById("password").onblur = checkPassword;document.getElementById("repassword").onblur = checkPassword;};