热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript实现表单验证示例

html表单(form)通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等。但是很可能某些用户可能不会输入您期望的数据。html表单验证可以通过javascript完成。为

html表单(form)通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等。

但是很可能某些用户可能不会输入您期望的数据。html表单验证可以通过Javascript完成。

为了避免对服务器资源造成不必要的压力,您可以使用Javascript在客户端(用户系统)上验证表单数据,不正确的信息是不会提交给后台服务器的——这是所谓客户端验证。本文将介绍这种验证

【表单验证一般分为两种方式。

客户端验证:直接在客户端执行js进行验证,验证的过程中和服务器端没有任何的交互

服务器端验证:页面将验证信息传回服务器端,服务器端进行验证,并将验证的结果发送回客户端

这两个验证都是必须的,因为客户端的验证安全性不是太高,但是可以防止80%以上的用户的误操作,可以减轻服务器端的压力,而且速度非常快,用户体验高。不要以为有了客户端的验证就不需要了服务器端的了,客户端的验证是很容易绕过去的,服务器端验证安全性比较高,所以一般验证两个验证都需要写。】

例1、一个简单示例











姓名:




    

保存文件名为:表单验证的例1.html

用浏览器运行测试之,效果如下:

例2、一个复杂点的示例




 
 
  
 
 
 

 

 
 


 
 
 
 
 
 
 
 
 
 
 
   
 
 
 
 
   
 
 
 
   
 
 
请输入你的注册信息
请输入你的用户名:

       
   
请输入你的年龄:

   
 
请输入你的email:

   
 

   
 

   
   

 

 

保存文件名为:表单验证的例1.html

用浏览器运行测试之,效果如下:

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



推荐阅读
  • JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下:问题如下:在a.html页面中,的 ... [详细]
  • php设置数组大小_【大厂必备】2020超经典PHP面试题
    结合我自己这段时间的面试情况,面对的一些php面试题列举出来,基本上结合自己的看法回答的,不妥的地方请大家指出去,与大家一起 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • 用JavaScript实现的太空人手表
    用JavaScript实现的太空人手表-JS写的太空人手表,没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ... [详细]
  • JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
author-avatar
赞达人
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有