共计 6136 个字符,预计需要花费 16 分钟才能阅读完成。
第一章: 使用 JavaScript 验证表单
JavaScript 的主要作用: 验证表单
1 最简单的表单验证 - 禁止空白的必填项目
1.1 最简单的 HTML 结构
网站最基础的就是注册, 它是一个系统的交互基础.
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 简单列表的 html 结构 </title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit" value="注册" />
</form>
</body>
</html>
1.2 绑定验证功能
因为用户最后要去点击 ” 注册 ” 按钮, 所以我们就在 ” 注册 ” 按钮上添加一个 onclick 事件属性, 引用 eg.regCheck()
例子:
注册事件
<!DOCTYPE html>
<html>
<!-- 绑定验证功能,注册事件 -->
<head>
<meta charset="utf-8">
<title> 简单列表的 html 结构 </title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""/><br/><br/>
密码:<input type="password" name=""/><br/><br/>
确认:<input type="password" name=""/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
// 声明一个对象, 当做命名空间来使用
var eg = {};
eg.regCheck = function(){}
</script>
</body>
</html>
eg.regCheck() 函数需要添加的行为, 获取用户输入的账户信息, 给 input 标签加上一个 id 属性,JavaScript 再通过这个指定的 id 去取得相应的信息, 然后返回验证结果 true 或 false
例子:
给表单添加验证功能
<!DOCTYPE html>
<html>
<!-- 给表单添加验证功能 -->
<head>
<meta charset="utf-8">
<title> 简单列表的 html 结构 </title>
</head>
<body>
<form method="post" action="">
账户:<input type="text" name=""id="userid"/><br/><br/>
密码:<input type="password" name=""id="userpwd"/><br/><br/>
确认:<input type="password" name=""id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
onclick="return eg.regCheck();"/>
</form>
<script >
// 声明一个对象, 当做命名空间来使用
// 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
var eg = {};
eg.$ = function(id){return document.getElementById(id);
};
eg.regCheck = function(){var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){alert('账户不能为空!');
// 返回 false 就会阻止表单 form 提交
return false;
}
if(upwd.value == ''){alert('密码不能为空!');
// 返回 false 就会阻止表单 form 提交
return false;
}
if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
// 返回 false 就会阻止表单 form 提交
return false;
}
return true;
};
</script>
</body>
</html>
1.3 绑定验证的另一种方式
把验证放在 ” 注册 ” 按钮的 onclick 事件属性里使用, 还有另一种调用方式, 即 form 标签的 onsubmit 事件属性
例子:
form 表单绑定验证完整范例
<!DOCTYPE html>
<html>
<!--
绑定验证的另一种方式,form 表单绑定验证完整示例
-->
<head>
<meta charset="utf-8">
<title> 简单列表的 html 结构 </title>
</head>
<body>
<form method="post" action=""onsubmit="return eg.regCheck();">
账户:<input type="text" name=""id="userid"/><br/><br/>
密码:<input type="password" name=""id="userpwd"/><br/><br/>
确认:<input type="password" name=""id="userpwd2"/><br/><br/>
<input type="submit"
value="注册"
/>
</form>
<script>
// 声明一个对象, 当做命名空间来使用
// 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
var eg = {};
eg.$ = function(id){return document.getElementById(id);
};
eg.regCheck = function () {var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){alert('账户不能为空!');
// 返回 false 就会阻止表单 form 提交
return false;
}
if(upwd.value == ''){alert('密码不能为空!');
// 返回 false 就会阻止表单 form 提交
return false;
}
if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
// 返回 false 就会阻止表单 form 提交
return false;
}
return true;
};
</script>
</body>
</html>
2, 处理各种类型的表单元素
2.1,input,textarea,hidden 和 button
要求: 在注册表单的基础上加 ” 简介 ” 字段,可以为空,但是最长不超过 60 个字符,同时要统计一下,用户输入错误的次数,输入超过 3 次,就锁定 ” 注册 ” 按钮, 然后要 ” 解锁 ” 才能重新使用
例子:
处理各种类型表单一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 处理各种类型表单一 </title>
</head>
<body>
<form method="post" action=""onsubmit="return eg.regCheck();">
账户:<input type="text" name=""id="userid"/><br/><br/>
密码:<input type="password" name=""id="userpwd"/><br/><br/>
确认:<input type="password" name=""id="userpwd2"/><br/><br/>
简介:
<textarea name=""rows="4"cols="18"id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
// 声明一个对象, 当做命名空间来使用
// 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
var eg = {};
eg.$ = function(id){return document.getElementById(id);
};
// 主要的验证方法
eg.regCheck = function () {var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value 是元素自带属性
if(uid.value == ''){alert('账户不能为空!');
eg.err();
return false;
}
if(upwd.value == ''){alert('密码不能为空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
eg.err();
return false;
}
// 新增部分
var about = eg.$("about");
//value 是字符串类型的属性
if (about.value.length>60){alert("简介太长!");
eg.err();
return false;
}
// 返回 true 就会提交表单
return true;
};
// 出错时记录错误次数
eg.err = function () {var el = eg.$("errnum");
var old = el.value;
// 把字符串转换为整数 +1, 并保存起来
el.value = parseInt(old)+1;
// 用来检查是否应该锁定
eg.lock();};
// 通过次数判断是否要锁定
eg.lock = function(){var err = eg.$("errnum");
if (parseInt(err.value)>2){eg.$("regBtn").disabled = true;
// 根据业务需求, 输错 3 次就锁定
eg.$("regUnlock").style.display="block";
// 同时显示解锁按钮
}
};
eg.unlock = function(){eg.$("regBtn").disabled = false;
// 根据业务需求,解锁就是让用户可以重新注册
eg.$("regUnlock").style.display="none";
// 元素所有样式都挂载到 style 属性下
}
</script>
</body>
</html>
现在制作一个错误统计, 可以为后台系统保存起来用于分析用户的错误率,甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到,可以选择 input 的 type 属性是 hidden 的元素来存储
2.2checkbox,radio 和 select
知道用户性别, 年龄, 兴趣爱好
例子:
处理各种类型表单二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 处理各种类型表单二 </title>
</head>
<body>
<form method="post" action=""onsubmit="return eg.regCheck();">
账户:<input type="text" name=""id="userid"/><br/><br/>
密码:<input type="password" name=""id="userpwd"/><br/><br/>
确认:<input type="password" name=""id="userpwd2"/><br/><br/>
简介:
<textarea name=""rows="4"cols="18"id="about">
</textarea><br/><br/>
<input type="submit"
value="注册" id="regBtn"
/>
<input type="button" value="解锁" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
// 声明一个对象, 当做命名空间来使用
// 定义一个公共函数来获取指定 id 元素, 减少代码量, 提高代码复用率
var eg = {};
eg.$ = function(id){return document.getElementById(id);
};
// 主要的验证方法
eg.regCheck = function () {var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value 是元素自带属性
if(uid.value == ''){alert('账户不能为空!');
eg.err();
return false;
}
if(upwd.value == ''){alert('密码不能为空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){alert('两次输入密码不相同!');
eg.err();
return false;
}
// 新增部分
var about = eg.$("about");
//value 是字符串类型的属性
if (about.value.length>60){alert("简介太长!");
eg.err();
return false;
}
// 返回 true 就会提交表单
return true;
};
// 出错时记录错误次数
eg.err = function () {var el = eg.$("errnum");
var old = el.value;
// 把字符串转换为整数 +1, 并保存起来
el.value = parseInt(old)+1;
// 用来检查是否应该锁定
eg.lock();};
// 通过次数判断是否要锁定
eg.lock = function(){var err = eg.$("errnum");
if (parseInt(err.value)>2){eg.$("regBtn").disabled = true;
// 根据业务需求, 输错 3 次就锁定
eg.$("regUnlock").style.display="block";
// 同时显示解锁按钮
}
};
eg.unlock = function(){eg.$("regBtn").disabled = false;
// 根据业务需求,解锁就是让用户可以重新注册
eg.$("regUnlock").style.display="none";
// 元素所有样式都挂载到 style 属性下
}
</script>
</body>
</html>
正文完
发表至: javascript
2019-08-19