简单的表单验证
作者：互联网
1.用户名不能为空
2.用户名必须在6-14位之间
3.用户名只能有数字字母组成，不能含有特殊符号（正则表达式）
4.密码和确认密码一致，邮箱地址合法。
5.统一失去焦点验证
6.文本框再次获取焦点后，清空错误提示信息，如果文本框内容不合法，清空value
7.全部合法才可提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单验证</title>
<style type="text/css">
span {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script>
window.onload = function () {
var usernameEltSpan = document.getElementById("usernameError");
//给用户名文本框绑定blur事件
var usernameElt = document.getElementById("username");
usernameElt.onblur = function () {
//获取用户名
var username = usernameElt.value;
//去除前后空白
username = username.trim();
//判断用户名是否为空
var usernameEltSpan = document.getElementById("usernameError");
if (username === "") {
usernameEltSpan.innerText = "用户名不能为空";
} else {
if (username.length < 6 || username.length > 14) {
//用户名长度非法
usernameEltSpan.innerText = "用户名长度必须在【6-14之间】";
} else {
//用户名长度合法，继续判断是否有特殊符号
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if (ok) {
//用户合法
} else {
//用户名中含有特殊符号
usernameEltSpan.innerText = "用户名只能由数字和字母组成";
}
}
}
usernameElt.onfocus = function () {
//清空非法value
if (usernameEltSpan.innerText != "") {
usernameElt.value = "";
}
//清空span
usernameEltSpan.innerText = "";
};
};
//获取密码错误的span标签
var paswordErrorSpan = document.getElementById("paswordError");
//获取确认密码框对象
var pwordElt = document.getElementById("pword");
//绑定blur事件
pwordElt.onblur = function () {
var passwordElt = document.getElementById("password");
//获取密码
var password = passwordElt.value;
//获取确认密码
var pword = pwordElt.value;
if (password != pword) {
//密码不同
paswordErrorSpan.innerText = "密码不相同";
} else {
//密码相同
}
};
//给确认密码绑定focus事件
pwordElt.onfocus = function () {
if (paswordErrorSpan.innerText != "") {
pwordElt.value = "";
}
paswordErrorSpan.innerText = "";
};
//邮箱
var emailSpan = document.getElementById("emailError");
var emailElt = document.getElementById("email");
//给Email绑定blur事件
emailElt.onblur = function () {
//获取email
var email = emailElt.value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if (ok) {
//合法
} else {
//不合法
emailSpan.innerText = "邮箱地址不合法";
}
};
//给邮箱绑定focus
emailElt.onfocus = function () {
if (emailSpan.innerText != "") {
emailElt.value = "";
}
emailSpan.innerText = "";
};
//给提交按钮绑定点击事件
var submitBtnElt = document.getElementById("btn");
submitBtnElt.onclick = function () {
usernameElt.focus();
usernameElt.blur();
pwordElt.focus();
pwordElt.blur();
emailElt.focus();
emailElt.blur();
if (
usernameEltSpan.innerText == "" &&
paswordErrorSpan.innerText == "" &&
emailSpan.innerText == ""
) {
//获取表单对象
var userFormElt = document.getElementById("userForm");
userFormElt.submit();
}
};
};
</script>
<form id="userForm" action="save" method="POST">
用户名<input type="text" name="username" id="username" /><span
id="usernameError"
></span
><br />
密码<input type="text" name="password" id="password" /><br />
确认密码<input type="test" v id="pword" /><span id="paswordError"></span
><br />
邮箱<input type="text" name="email" id="email" /><span
id="emailError"
></span
><br />
<input type="button" value="提交" id="btn" />
<input type="submit" value="重置" />
</form>
</body>
</html>
标签：用户名,验证,value,表单,getElementById,innerText,简单,var,document 来源： https://blog.csdn.net/FFshanshi/article/details/120593177