目录
一、实现要求
综合使用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是前端的基础以及重要的前置知识，需要融汇贯通的熟练掌握，一些平常的小页面，有助于更好的学习以及掌握底层前端逻辑知识，我是谈谈叭~,一个正在学习前端的大学畜，希望大家指正！一起交流学习~