极乐门资源网 Design By www.ioogu.com
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无JavaScript使用表单元素验证表单的示例代码的评论...
更新日志
2024年12月27日
2024年12月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]