如何在JavaScript中使用表单元素验证表单

今天就跟大家聊聊有关如何在JavaScript中使用表单元素验证表单,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

秦安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

1最简单的表单验证-禁止空白的必填项目

1.1最简单的HTML结构

网站最基础的就是注册,它是一个系统的交互基础.

例子:



  
    
    简单列表的html结构
  
  
    
      账户:

      密码:

      确认:

              

1.2绑定验证功能

因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()

例子:

注册事件



  
  
    
    简单列表的html结构
  
  
    
      账户:

      密码:

      确认:

                           //声明一个对象,当做命名空间来使用       var eg = {};       eg.regCheck = function(){                }        

eg.regCheck()函数需要添加的行为,获取用户输入的账户信息,给input标签加上一个id属性,JavaScript再通过这个指定的id去取得相应的信息,然后返回验证结果true或false

例子:

给表单添加验证功能



  
  
    
    简单列表的html结构
  
  
    
      账户:

      密码:

      确认:

                       //声明一个对象,当做命名空间来使用       //定义一个公共函数来获取指定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;       };        

1.3绑定验证的另一种方式

把验证放在"注册"按钮的onclick事件属性里使用,还有另一种调用方式,即form标签的onsubmit事件属性

例子:

form表单绑定验证完整范例




  
    
    简单列表的html结构
  
  
    
      账户:

      密码:

      确认:

                   

2,处理各种类型的表单元素

2.1,input,textarea,hidden和button

要求:在注册表单的基础上加"简介"字段,可以为空,但是最长不超过60个字符,同时要统计一下,用户输入错误的次数,输入超过3次,就锁定"注册"按钮,然后要"解锁"才能重新使用

例子:

处理各种类型表单一




  
    
    处理各种类型表单一
  
  
    
      账户:

      密码:

      确认:

      简介:                  

                          

现在制作一个错误统计,可以为后台系统保存起来用于分析用户的错误率,甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到,可以选择input的type属性是hidden的元素来存储

2.2checkbox,radio和select

知道用户性别,年龄,兴趣爱好

例子:

处理各种类型表单二




  
    
    处理各种类型表单二
  
  
    

      账户:

      密码:

      确认:

      简介:                  

                          

看完上述内容,你们对如何在JavaScript中使用表单元素验证表单有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站标题:如何在JavaScript中使用表单元素验证表单
网站地址:http://scyanting.com/article/gipjho.html