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>
新闻热点
疑难解答
图片精选
