javascript|JavaScript表单验证前端|html|javascript

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

验证用户名与密码为指定格式
- 在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等
验证单选框所选内容
- 最常见的验证单选框就是验证性别
验证多选框
- 如验证爱好等

三.表单验证所需事件我们在进行表单验证时通常只会用到如下几个事件:
onsubmit(提交表单),onclick(点击事件),onfocus(焦点聚集事件),onblur(焦点离开事件)

在上述几个事件中,onsubmit()事件比较特殊,它是在我们提交表单时才会触发.这使得我们在进行表单验证时有两种主要的方式:
- 1.在输入完成所有表单内容后点击提交按钮统一进行验证
- 2.通过对每一个表单元素分别添加事件进行单独验证

四.表单验证代码示例

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

- 锐客网账号密码 ?
- 验证的效果图如下:
  文章图片
接下来我们示例对单独表单元素的验证:

- 锐客网账号密码

验证的效果图如下:
文章图片

五.表单验证的实例接下来我们完成的展示使用注册表单进行验证
首先是html部分:

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

接下来是css部分:

*{/* 清除浏览器的默认样式*/ margin: 0; padding: 0; } .c1{background-color: #2692ff; color: #fff3ff; text-align: center; line-height: 35px; ; }.c3{ width: 500px; height: 400px; background-color: #b4daff; margin-left: auto; margin-right: auto; text-align: center; line-height: 30px; }

最后是JavaScript部分: