JavaScript使用表单元素验证表单的示例代码

前端  /  管理员 发布于 4年前   192

JavaScript的主要作用:验证表单

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

1.1最简单的HTML结构

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

例子:

                  
      账户:

      密码:

      确认:

          
  

1.2绑定验证功能

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

例子:

​ 注册事件

                    
      账户:

      密码:

      确认:

              
      

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

例子:

​ 给表单添加验证功能

                    
      账户:

      密码:

      确认:

          
      

1.3绑定验证的另一种方式

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

例子:

​ form表单绑定验证完整范例

                  
      账户:

      密码:

      确认:

          
      

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

2.1，input,textarea,hidden和button

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

例子:

​ 处理各种类型表单一

                  
      账户:

      密码:

      确认:

      简介:                

                
      

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

2.2checkbox,radio和select

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

例子:

​ 处理各种类型表单二

                  
      账户:

      密码:

      确认:

      简介:                

                
      

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• js验证表单大全
• js 常用正则表达式表单验证代码
• 利用JS提交表单的几种方法和验证(必看篇)
• JavaScript 表单验证正则表达式大全[推荐]
• JavaScript表单验证完美代码
• AngularJS实现表单验证
• javascript制作的简单注册模块表单验证
• AngularJS使用ngMessages进行表单验证
• 收藏的js表单验证控制代码大全
• JavaScript表单验证实例之验证表单项是否为空
• AngularJS实现表单手动验证和表单自动验证
• javascript表单验证 - Parsley.js使用和配置
• JavaScript 使用正则表达式进行表单验证的示例代码