新手入门一个简单实例,说明JavaScript如何确认表单信息完整

JavaScript是一种基于浏览器的广泛应用的脚本语言,嵌入于HTML页面,用来增强网页的交互功能。除了这些JavaScript还有响应浏览器事件、读写页面元素、验证提交数据、控制cookies、基于Node.js技术。JavaScript常用的是读写页面元素和控制表单,今天为大家讲一个简单的JavaScript确认表单信息完整实例。

新手入门一个简单实例,说明JavaScript如何确认表单信息完整

在html页面中常见的是注册表单,用户提交数据之前,页面会调用JavaScript检查数据的完整性,检查提交数据是否漏填、错填等。如果有的重要数据项未填写会终止提交动作,并且弹出警告框提示用户,最终确保填写数据准确有效。

实现过程

1、创建html文件form表单。

2、创建JavaScript代码。

3、编写提交数据验证规则。

4、测试代码。

代码和运行效果如下:

新手入门一个简单实例,说明JavaScript如何确认表单信息完整

JavaScript知识点总结

1、onsubmit 事件

这段代码由HTML表单和JavaScript部分组成。需要注意的是 onsubmit 事件在表单提交时触发JavaScript代码,而这段代码onsubmit="return check_sub();",表示提交表单是会执行JavaScript代码中的check_sub()函数。onsubmit 事件支持冒泡事件、不可以取消、事件类型是 Event、支持html中的

标签。

2、check_sub()

JavaScript中,我们往往把功能相同的一段代码写封装到一个独立的模块中,这个模块就叫做函数(JavaScript中的函数概念和PHP中的概念相识的)。我们把主要把验证用户提交数据代码都放在check_sub()函数中,它依次去判断表单中的三个元素是否为空,密码(sub_pwdone)和确认密码(sub_pwdtwo)是否相同,如果所有数据填写无误后会提示“提交成功”。

新手入门一个简单实例,说明JavaScript如何确认表单信息完整

3、a()函数

a()函数主要作用是根据页面元素的“id”属性获得对页面元素的引用,直接调用了“document.getElementById”方法,调用了5次a()函数,相当于使用了5次document.getElementById方法。a作为函数名仅仅是因为长度比较短,所以a()函数实际上是“document.getElementById”的简写。也可以不调用a()函数,直接使用“document.getElementById”方法,只不过代码看起来有点繁琐。

4、if...else语句

在编程中我们往往需要根据不同的条件来执行不同的动作,这个时候就可以用到if..else语句,if..else语句之前的文章详细讲解过,今天就不再重复说了。

关于“JavaScript确认表单信息完整的实例”先聊到这,还是要多多练习。每天学习一个知识点,每日寄语-“欲望以提升热忱,毅力以磨平高山。”


分享到:


相關文章: