Javascript实现最简单的表单验证

最新推荐文章于 2023-10-29 10:40:29 发布

chuansejia3960

最新推荐文章于 2023-10-29 10:40:29 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2460998/blog/546359

版权

利用表单实现注册的功能，其实就是一个系统的动态交互，原理相当简单。

1.html结构：

      <!DOCTYPE html>                
      <html>
                <head>
                <meta charset="UTF-8">
                <title>最简单的表单的Html结构</title>
                </head>
                <body>
                <form action="" method="post">
                账户：<input type="text" name="" /><br/><br/>
                密码：<input type="password" name="" /><br/><br/>
                确认：<input type="password" name="" /><br/><br/>
                <input type="button" value="注册" />
                </form>
                </body>
      </html>

2.绑定验证功能：

 <!DOCTYPE html>               
  <html>
                <head>
                <meta charset="UTF-8">
                <title>最简单的表单的Html结构</title>
                </head>
                <body>
                <form action="" method="post">
                账户：<input type="text" name="" id="userid" /><br/><br/>
                密码：<input type="password" name="" id="userpwd" /><br/><br/>
                确认：<input type="password" name="" id="userpwd1" /><br/><br/>
                <input type="button" value="注册" onclick="check();" />
                </form>
                <script>
                function check(){
                 var uid =document.getElementById("userid");
                var upwd =document.getElementById("userpwd");
                var upwd1 =document.getElementById("userpwd1");
                if(uid.value == ''){
                alert("账户不能为空！");
                return false;
                }
                if(upwd.value ==''){
                alert("密码不能为空！");
                return false;
                }
                if(upwd.value!=upwd1.value){
                alert("两次密码输入不相同！！");
                return false;
                }
                return true;
                }
                </script>
                </body>
        </html>

给予每个input一个id属性，js通过id获取对应的信息，然后返回对应的false和true。

在提交按钮上添加一个onclick事件，通过调用函数实现最简单的表单验证。

注：

再定义变量时可以使用‘单全局变量’来减少代码的书写量

1.var uid =document.getElementById("userid");

2.var eg()

eg.$=function(id){ return document.getElementById(id) };

eg.check()=function(){ var uid =eg.$("userid"); };

对于第二种方法的定义变量的方法，暂时不能很好的理解，所以不说明了。

“ 单全局变量”的意思是所创建的这个唯一全局对象名是独一无二的（不会和内置 API 产生冲突），

并将你所有的功能代码都挂载到这个全局对象上。