HTML+CSS+jQuery实现登录界面（含用户验证）
前言
本登录页面来自最近在做的一个学生作业管理项目。在系统设计时，学生和教师用户统一由该校的管理员导入，因此去除了用户注册的功能。
登录页面由 HTML+CSS+jQuery 实现，通过 $.ajax 获取 json 文件并读取其中保存的学校列表，动态的展示在选择学校的下拉列表中。
该页面实现了简单的登录验证功能。
不赘述 HTML 和 CSS 的实现原理！仅对 jQuery 部分进行详解，需要源代码的可以自行下载，内含详细注释。
源代码：
百度网盘：https://pan.baidu.com/s/1rq4RFBVwywE-Hu1LbLSo-w?pwd=1234
效果演示
实现原理
页面加载后，选择学校的下拉列表默认为空，需要通过 $.ajax 获取 json 文件中数据，动态的展示在下拉列表中，具体代码如下：
// school_list.json 文件内容
{
"zhongguokejidaxue": "中国科技大学",
"anhuidaxue": "安徽大学",
"hefeigongyedaxue": "合肥工业大学",
"qinghuadaxue": "清华大学",
"fudandaxue": "复旦大学",
"zhejiangdaxue": "浙江大学",
"nanjingdaxue": "南京大学",
"shanghaijiaotong": "上海交通大学",
"haerbingongye": "哈尔滨工业大学"
}
// js 代码
$(document).ready(function () {
// 异步请求本地 school_list.json 文件，获取所有学校
$.ajax({
url: "./json/school_list.json",
type: "get",
dataType: "json",
success: function (data) {
// 获取键名并存入数组
let dataKey = [];
for (let i in data) {
dataKey.push(i);
}
// 对数组数据进行排序（按大学名降序）
dataKey = dataKey.sort();
// 将排好序的大学添加到下拉列表中
for (let i=0; i<dataKey.length; i++) {
let element = document.createElement('li');
element.setAttribute("data-sort", dataKey[i]);
element.innerHTML = data[dataKey[i]];
$('ul').append(element);
}
}
});
});
前后效果对比：
选择大学框获取焦点后，自动展开下拉列表，选择大学可以手动输入，同时会自动匹配下拉列表中对应的学校，这里通过给输入框绑定事件监听器，通过正则表达式实现实时输入匹配。具体代码如下：
$(document).ready(function () {
/* 省略部分代码 */
$('#school').on({
// 选择大学框获取焦点
'focus': function () {
// ul 列表（学校）
let $schoolList = $('ul');
// 打开下拉框（动画）
$schoolList.fadeIn(0).animate({height: "+=200px"}, 200);
// 输入自动匹配
$('#school').on('input', function () {
// 实时获取文本框中的值
let content = $('#school').val();
// 输入拼音时去除分隔符
content = content.replace("'", "");
// 隐藏所有 li 元素
$('li').hide();
// 通过正则表达式来筛选大学
let regInput = new RegExp(content);
$schoolList.children().each(function () {
// 拼音或者中文任意一个都可以匹配成功
if (regInput.test($(this).attr("data-sort")) || regInput.test($(this).text())) {
// 将符合条件的 li 显示出来
$(this).show();
}
});
});
// 鼠标点击大学并自动填入输入框
$schoolList.on({
'click': function (e) {
// 因为将事件绑定在了 ul 上，因此通过 e.target 指向点击的 li
// 通过这种方式只需要绑定一个事件监听器，可以优化性能。
// 通过条件判断限制点击事件仅被 li 触发
if (e.target !== this) {
$('#school').attr({
"data-sort": e.target.getAttribute('data-sort')
}).val(e.target.innerHTML);
}
}
});
},
// 隐藏下拉列表
'blur': function () {
//动画消失
$('ul').animate({height: "-=200px"}, 200).fadeOut(0);
}
});
});
效果如下：
最后，在点击提交按钮时，会做出相应的验证，比如判断输入框是否为空，并弹出提示信息。提示框是通过调用函数实现的，传入提示信息即可，具体代码如下：
$(document).ready(function () {
/* 省略部分代码 */
// 点击提交按钮
$('.but').click(function (e) {
// 获取表单数据
let school = $('#school').attr('data-sort');
let user = $('#user').val();
let pwd = $('#pwd').val();
let identity = $(':radio:checked').val();
// console.log(school, user, pwd, identity);
// 判断选项表单是否符合要求
if (school === undefined) {
alertBar("请选择学校！");
} else if (user === "") {
alertBar("请输入用户名！");
} else if (pwd === "") {
alertBar("请输入密码！");
} else if (identity === undefined) {
alertBar("请选择登录身份！");
} else {
/**
* 这里省略用户名和密码判断，
* 在原本的项目中是通过 $.ajax 与服务器进行交互的。
* 并可以返回用户名或密码的错误提示
*/
}
// 显示提示框信息
function alertBar(massage) {
let $alert = $('.alert');
$alert.hide().css("top", "0");
$alert.show().animate({
top: "+=20px"
}).text(massage);
}
});
});
效果如下：
