HTML (4) JS实现表单验证

再上一个登陆成功的registersuccess.html

//上代码：

注册成功

最后用JS来验证表单，其中用到正则表达式。其中用到的语法和流程代码都有详细介绍！

//上代码：

//定义全局变量来接受标记对象

var usernameObj;

var passwordObj;

var usernameMsg;

var passwordMsg;

//获取标记对象

window.onload = function() {

//获取输入控件的标记对象

usernameObj = document.getElementById(“username”);

passwordObj = document.getElementById(“password”);

//获取错误信息的标记对象

usernameMsg = document.getElementById(“usernameMsg”);

passwordMsg = document.getElementById(“passwordMsg”);

};

//验证整个表单

function checkForm() {

var bUsername = checkUsername();

var bPassword = checkPassword();

return bUsername && bPassword; // return false后, 事件将被取消

}

//验证用户名

function checkUsername() {

var regex = /¹\w{0,9}$/; // 字母数字下划线1到10位, 不能是数字开头（不分大小写）

var value = usernameObj.value; // 获取usernameObj中的文本

var msg = “”; // 最后的提示消息, 默认为空

if (!value) // 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false

msg = “用户名必须填写：”; // 改变提示消息

else if (!re

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

gex.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))

msg = “密码不合法：”;

passwordMsg.innerHTML = msg;

passwordObj.parentNode.parentNode.style.color = msg == “” ? “black” : “red”;

return msg == “”;

}

最终的效果：

这里可以看到如果输入的会员名和密码不合法，就会出现右边的红色提示，且不允许提交表单。只有符合正则表达式里的要求，才能返回true，然后通过验证。

这里是成交提交之后跳转的链接！

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

---

1. a-zA-Z_ ↩︎