表单验证
-
表单要求
1、用户名不能为空
2、用户名必须在6-14位
3、用户名和密码由数字和字母组成（正则表达式）
4、密码和确认密码一致，邮箱地址合法
5、统一失去焦点验证
6、错误信息统一在span标签中显示，要求字体12号，红色
7、文本框获得焦点，清除错误信息，如果文本框中数据不合法，要求清空文本框的value
8、最终表单所有项均合法方可提交 -
代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
//网页加载完毕后可执行JS代码
window.onload = function () {
var retVal = true;
var usernameElt = document.getElementById("username");
var usernameErrorSpan = document.getElementById("usernameError");
//用户名正则表达式
var usernameRegExp = /^[a-zA-Z0-9_-]{4,16}$/;
//用户名验证开始
//用户名验证,失去焦点验证
usernameElt.onblur = function () {
//判断username的value值是否为空
//清除前后空白
var username = usernameElt.value.trim();
usernameElt.value = username;
var usernameRetVal = usernameRegExp.test(username);
//username不为空或全为空格开始验证
if (!(usernameElt.value == "")) {
if (!usernameRetVal) {
//此处测试正确
//获取用户名后文本对象
usernameErrorSpan.innerHTML = "<font color='red'>用户名不符合格式</font>";
} else {
//此处测试正确
usernameErrorSpan.innerHTML = "<font color='green'>用户名符合格式</font>";
}
} else {
usernameErrorSpan.innerHTML = "<font color='red'>用户名不能为空</font>"
}
}
//获取焦点，清除span内容
usernameElt.onfocus = function () {
//如果username等于一个或多个空格
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if (!(usernameErrorSpan.innerText.indexOf("不") == -1)) {
//如果usernameError不为空串,字符串中含有"不"清空value
usernameElt.value = "";
}
//清空span内容
usernameErrorSpan.innerText = "";
}
//电话验证，失去焦点验证
var telnumberElt = document.getElementById("telnumber");
var telnumberErrorSpan = document.getElementById("telnumberError")
var telnumberRegExp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
//电话验证，失去焦点开始验证
telnumberElt.onblur = function () {
//去除前后空白
var telnumber = telnumberElt.value.trim();
telnumberElt.value = telnumber;
//telnumber不为空开始验证
if (!(telnumberElt.value == "")) {
//电话格式验证
var telnumberRetVal = telnumberRegExp.test(telnumber);
if (telnumberRetVal) {
telnumberErrorSpan.innerHTML = "<font color='green'>电话格式正确</font>"
} else {
telnumberErrorSpan.innerHTML = "<font color='red'>电话格式不正确(数字和字母结合)</font>"
}
} else {
//密码不能为空
telnumberErrorSpan.innerHTML = "<font color='red'>电话不能为空</font>"
}
}
//电话获得焦点,电话获得焦点，重复电话span内容清空
telnumberElt.onfocus = function () {
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if (!(telnumberErrorSpan.innerText.indexOf("不") == -1)) {
//如果telnumberErrorSpan不为空串,字符串中含有"不"清空value
telnumberElt.value = "";
}
//清空span内容
telnumberErrorSpan.innerText = "";
}
//密码验证，失去焦点验证
var passwordElt = document.getElementById("password");
var passwordErrorSpan = document.getElementById("passwordError")
var passwordRegExp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
//密码验证，失去焦点开始验证
passwordElt.onblur = function () {
//去除前后空白
var password = passwordElt.value.trim();
passwordElt.value = password;
//password不为空开始验证
if (!(passwordElt.value == "")) {
//密码格式验证
var passwordRetVal = passwordRegExp.test(password);
if (passwordRetVal) {
passwordErrorSpan.innerHTML = "<font color='green'>密码格式正确</font>"
} else {
passwordErrorSpan.innerHTML = "<font color='red'>密码格式不正确(数字和字母结合)</font>"
}
} else {
//密码不能为空
passwordErrorSpan.innerHTML = "<font color='red'>密码不能为空</font>"
}
}
//密码获得焦点,密码获得焦点，重复密码span内容清空
passwordElt.onfocus = function () {
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if (!(passwordErrorSpan.innerText.indexOf("不") == -1)) {
//如果passwordErrorSpan不为空串,字符串中含有"不"清空value
passwordElt.value = "";
}
//清空span内容
passwordErrorSpan.innerText = "";
}
//密码获得焦点,密码获得焦点，重复密码span内容清空
passwordElt.onfocus = function () {
//清空非法value,使用index函数，结果等于-1，则不含有该字符串
if (!(passwordErrorSpan.innerText.indexOf("不") == -1)) {
//如果passwordErrorSpan不为空串,字符串中含有"不"清空value
passwordElt.value = "";
}
//清空span内容
passwordErrorSpan.innerText = "";
}
//确认密码验证，失去焦点验证
var confirmPwdElt = document.getElementById("confirmPwd");
var confirmPwdErrorSpan = document.getElementById("confirmPwdError");
//密码验证，失去焦点开始验证
confirmPwdElt.onblur = function () {
//清除验证密码中的前后空白
var confirmPwd = confirmPwdElt.value.trim();
confirmPwdElt.value = confirmPwd;
//判断密码内容是否为空，不为空则开始验证
if (!(confirmPwdElt.value == "")) {
//重复密码内容不为空，开始验证
//判断密码是否为空，不为空则开始验证
if (passwordElt.value == "") {
confirmPwdErrorSpan.innerHTML = "<font color='red'>密码不能为空</font>"
} else {
//判断密码和重复密码是否相等
if (passwordElt.value === confirmPwdElt.value) {
//更改passwordErrorSpan中内容
confirmPwdErrorSpan.innerHTML = "<font color='green'>重复密码验证成功</font>"
} else {
confirmPwdErrorSpan.innerHTML = "<font color='red'>重复密码验证不成功</font>"
}
}
} else {
confirmPwdErrorSpan.innerHTML = "<font color='red'>验证密码不能为空</font>"
}
}
//获取重复密码焦点时，清空span内数据，如果重复密码错误，则清空重复密码
confirmPwdElt.onfocus = function () {
//使用indexOf()方法判断span字符串中是否含有"失"字,结果等于-1，则不含有失字
if (!(confirmPwdErrorSpan.innerHTML.indexOf("失") == -1)) {
//清空非法重复密码值
confirmPwdElt.value = "";
}
//获取焦点时清除span内值
confirmPwdErrorSpan.innerText = "";
}
//邮箱地址验证
var emailElt = document.getElementById("email");
var emailErrorSpan = document.getElementById("emailError")
var emailRegExp = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/;
//失去焦点时开始验证
emailElt.onblur = function () {
//去除邮箱地址前后空白
var email = emailElt.value.trim();
emailElt.value = email;
var emailRetVal = emailRegExp.test(email);
//邮箱地址不为空时开始验证
if (!(emailElt.value == "")) {
//开始验证
if (emailRetVal) {
emailErrorSpan.innerHTML = "<font color='green'>邮箱地址格式验证成功</font>"
} else {
emailErrorSpan.innerHTML = "<font color='red'>邮箱地址格式验证不成功</font>"
}
} else {
emailErrorSpan.innerHTML = "<font color='red'>邮箱地址不能为空</font>"
}
}
//获得焦点时，邮箱格式不正确，则清空非法邮箱value值，并清除span内容
emailElt.onfocus = function () {
//indexOf方法结果为-1，则表示不含有该字符串
if (!(emailErrorSpan.innerText.indexOf("失") == -1)) {
//清空非法value值
emailElt.value = "";
}
//不管地址验证是否成功，在获取焦点后都要讲span中内容删除
emailErrorSpan.innerText = "";
}
// 提交表单
//获取表单队形
var submitElt = document.getElementById("submitBtn");
//点击事件发生，进行表单信息提交验证
submitElt.onclick = function () {
if (usernameErrorSpan.innerText == "") {
usernameElt.focus();
usernameElt.blur();
}
if (passwordErrorSpan.innerText == "") {
passwordElt.focus();
passwordElt.blur();
}
if (confirmPwdElt.innerText == "") {
confirmPwdElt.focus();
confirmPwdElt.blur();
}
if (emailElt.innerText == "") {
emailElt.focus();
emailElt.blur();
}
//表单提交
var userFromElt = document.getElementById("userFrom");
if (usernameElt.innerText.indexOf("不") == -1 || passwordElt.innerText.indexOf("不") == -1 || confirmPwdElt.innerText.indexOf("不") == -1 || emailElt.innerText.indexOf("不") == 1) {
userFromElt.action = "#"
//提交表单
userFromElt.submit();
}
}
}
</script>
<style type="text/css">
.box {
display: flex;
/*定义子级元素垂直居中*/
align-items: center;
/* 定义子级元素水平居中 */
justify-content: center;
background-color: rgb(236, 236, 171);
}
input {
background: none;
outline: none;
border: 0px;
width: 100%;
background-color: rgb(248, 246, 246);
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 10px 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container box">
<form id="userFrom" method="get" action="#">
<div class="col-md-12" style="text-align: center;">
<h1>表单提交</h1>
</div>
<div class="col-md-12">
用户名：
<div>
<input type="text" id="username" name="username">
</div>
<span id="usernameError"></span>
<br>
</div>
<div class="col-md-12">
电话：<div>
<input type="text" id="telnumber" name="telnumber">
</div>
<span id="telnumberError"></span>
<br>
</div>
<div class="col-md-12">
密码：<div>
<input type="text" id="password" name="password">
</div>
<span id="passwordError"></span>
<br>
</div>
<div class="col-md-12">
确认密码：<div>
<input type="text" id="confirmPwd" name="confirmPwd">
</div>
<span id="confirmPwdError"></span>
<br>
</div>
<div class="col-md-12">
邮箱地址：<div><input type="text" id="email" name="email"></div>
<span id="emailError"></span>
<br>
</div>
<input type="butten" value="提交信息" id="submitBtn">
<input type="reset" value="重置信息" id="resetBtn">
</form>
</div>
</body>
3.效果图
3232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
