JavaScript表单验证示例详解
HTML表单(form)通常用于收集用户信息,例如姓名,电子邮件地址,位置,年龄等。
但是很可能某些用户可能不会输入您期望的数据。HTML表单验证可以通过JavaScript完成。
为了避免对服务器资源造成不必要的压力,您可以使用JavaScript在客户端(用户系统)上验证表单数据,不正确的信息是不会提交给后台服务器的——这是所谓客户端验证。本文将介绍这种验证
表单验证一般分为两种方式。
客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互
服务器端验证:页面将验证信息传回服务器端,服务器端进行验证,并将验证的结果发送回客户端
这两个验证都是必须的,因为客户端的验证安全性不是太高,但是可以防止80%以上的用户的误操作,可以减轻服务器端的压力,而且速度非常快,用户体验高。不要以为有了客户端的验证就不需要了服务器端的了,客户端的验证是很容易绕过去的,服务器端验证安全性比较高,所以一般验证两个验证都需要写。】
例1、一个简单示例
表单验证简单示例 - 锐客网
保存文件名为:表单验证的例1.html
用浏览器运行测试之,效果如下:
文章图片
【JavaScript表单验证示例详解】例2、一个复杂点的示例
表单验证示例注册用户 - 锐客网
保存文件名为:表单验证的例1.html
用浏览器运行测试之,效果如下:
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 事件代理
- 数组常用方法一
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 (第2版)
- React.js的表单(六)