JavaScript表单验证

一.什么是表单验证?

    表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.

二.表单验证需求分析

在表单验证中,我们通常使用如下的验证功能:

  • 验证用户名与密码为指定格式

    • 在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等

  • 验证单选框所选内容

    • 最常见的验证单选框就是验证性别

  • 验证多选框

    • 如验证爱好等

三.表单验证所需事件

我们在进行表单验证时通常只会用到如下几个事件:

onsubmit(提交表单),onclick(点击事件),onfocus(焦点聚集事件),onblur(焦点离开事件)

  • 在上述几个事件中,onsubmit()事件比较特殊,它是在我们提交表单时才会触发.这使得我们在进行表单验证时有两种主要的方式:

    • 1.在输入完成所有表单内容后点击提交按钮统一进行验证

    • 2.通过对每一个表单元素分别添加事件进行单独验证

四.表单验证代码示例

  • 首先我们使用onsubmit()与onclick()事件进行统一提交验证:

    
    
        
            
            
            
        
        
            
    账号
    密码
    • 验证的效果图如下: JavaScript表单验证_第1张图片

  • 接下来我们示例对单独表单元素的验证:



	
		
		
		
	
	
		
账号
密码
  • 验证的效果图如下: JavaScript表单验证_第2张图片 

五.表单验证的实例

    接下来我们完成的展示使用注册表单进行验证

首先是html部分:


        
欢迎注册
用户名:
密码:
性别:男        
电话:
职业:
爱好:敲代码        打游戏 唱歌 运动
地址:
填写完成后点击下面提交按钮提交表单
   

接下来是css部分:

最后是JavaScript部分:

  • 这里我们只使用提交验证的方式对部分表单元素进行了验证,感兴趣的话可以将后续为进行验证的表单元素,如: 电话,职业,地址等进行验证.

验证效果图如下:

JavaScript表单验证_第3张图片

你可能感兴趣的:(javascript,javascript,前端,html)