DDR爱好者之家 Design By 杰米
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()
例子:
"htmlcode">
<!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
例子:
"htmlcode">
<!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事件属性
例子:
"htmlcode">
<!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次，就锁定"注册"按钮,然后要"解锁"才能重新使用
例子:
"htmlcode">
<!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
知道用户性别,年龄,兴趣爱好
例子:
"htmlcode">
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]