0

0

JavaScript表单验证功能的介绍

巴扎黑

巴扎黑

发布时间:2017-08-07 16:52:17

|

2202人浏览过

|

来源于php中文网

原创

最近在学习javascript,因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤,需要的的朋友参考下吧

文本框校验

以下是文本框的校验步骤。

1.获取待校验的文本框value值,

2.对value值设置判定条件,使用if语句或switch语句实现。

立即学习Java免费学习笔记(深入)”;

3. 若满足条件,则校验通过,返回值为true。

4. 若不满足条件则返回值为false,替换文本输出校验的提示信息。

5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件。

6. 在input中调用校验函数,我使用的是onblur事件触发校验函数。

下拉框校验

下拉框的校验相比文本框略有不同,下拉框中option的返回值为value,由select中的name值获取到用户的选择,因此在下拉框的校验函数中通过id获取到select中的value,在根据value值是否为空或为其余的非法值而进行不同的判断,其余的步骤也与文本框相同。

表单校验样式如下:

LOVESTUdio多校园网络店铺
LOVESTUdio多校园网络店铺

主要更新介绍: 完美整合Discuz!论坛,实现一站式登陆、退出、注册; 同步所有会员资料; 新增购物车功能,商品购买更加方便、快捷; 新增部分快捷菜单,网站访问更加方便; 限制首页商品、店铺标题显示长度; 修正会员后台管理不能更改密码的错误; 完善商品显示页面所有功能链接; 修正后台标签管理部分错误; 修正前台学校列表不按后台顺序显示的错误; 修正搜索功能中学校名称过长导致显示紊乱的现象; 修正

下载

这里是表单的初始样式 
确认密码校验 
用户名和分组校验

遇到的问题

  • 校验表单时出现问题但表单仍然能够提交?

  • 原因:onsubmit事件作为一个提交动作有一个默认的参数,这个参数的默认值为true,前面提到如果满足条件要求就返回true否则返回false,每一项的校验中都要设置一个布尔类型的返回值,如果所有的校验全部通过才能正常提交表单,只要有一项不满足条件也不能提交表单而需要重新输入,因此需要对每一项校验函数的返回值做一个逻辑运算,全为真则最终返回给onsubmit的值为true,否则为false,而onsubmit的参数为false则无法提交,故实现了表单校验失败时阻止提交。

  • 一开始输入错误的内容,在修改变成正确的内容之后提示仍然为之前的提示?

  • 原因:在返回值为true时,将输出提示信息的文本内容置为空,即document.getElementById(“什么什么”).innerHTML=”“;

  • onchange和onblur事件都可以用来触发校验,并且两者都会在失去焦点之后实现校验,但onblur触发校验时有可能会由于用户间断输入而提示输入内容不符合要求。

  • 表单校验的js代码段不能等页面都加载完成之后加载。

代码块

以下为程序源码:



                

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号