天津网站建设开发上海人才网赶集网
目录
一、实现要求
二、实现页面图
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;};
四、总结
javaScript、css、Html是前端的基础以及重要的前置知识，需要融汇贯通的熟练掌握，一些平常的小页面，有助于更好的学习以及掌握底层前端逻辑知识，我是谈谈叭~,一个正在学习前端的大学畜，希望大家指正！一起交流学习~
五、代码仓库
registerPage: 使用HTML、JavaScript和CSS进行注册页面设计