摘要:这样我们就有机会验证表单数据,并据以决定是否允许表单提交。下面代码会阻止表单提交取得时间对象阻止默认事件注意以这种方式提交表单,不会触发事件。
这里是表单验证的第一课:主要讲授有关表单的基础知识。
关于表单验证的更多知识可以参考《javascript高级程序设计》之第14章:表单脚本
1.表单事件
submit():提交表单
reset():将所有表单域重置为默认值
(1).取得form元素的引用
(1)var form=document.getElementById("form1"); (2)var form=document.getElementByTagName("form1"); (3)var forms=document.forms//取得页面中所有表单 var form=document.forms[0]//取得页面中第一个表单 var form=document.forms["form2"//取得页面中name="form2"的表单
(2).提交表单
(1) (2) (3)
以上方式提交表单时,浏览器会在将请求发送给服务器之前会触发submit事件。这样我们就有机会验证表单数据,并据以决定是否允许表单提交。
在编写表单提交代码之前,我们需要先了解一下浏览器兼容代码,代码文件EventUtil.js内容就发布在我的文章里,有兴趣的可以拿来好好读一读,这里不再阐述,直接使用。
下面代码会阻止表单提交:
var form=document.getElementById("myForm); EventUtil.addHandler(form,"submit",function(event){ //取得时间对象 var event=EventUtil.getEvent(event); //阻止默认事件 EventUtil.preventDefault(); })
注意:
var form=document.getElementById("myForm); form.submit();
以这种方式提交表单,不会触发submit事件。
(3)重置表单
(1) (2)
下面代码会阻止表单重置:
var form=document.getElementById("myForm); EventUtil.addHandler(form,"reset",function(event){ //取得时间对象 var event=EventUtil.getEvent(event); //阻止默认事件 EventUtil.preventDefault(); })
注意:
var form=document.getElementById("myForm); form.reset();
与submit事件不同,以这种方式提交表单,将会触发reset事件。
2.表单字段
可以像访问页面中其他元素一样,使用原生DOM方法访问表单元素。此外,每个表单都有Elements属性,该属性是表单中所有表单元素(字段)的集合。这个elements是有序表,其中包含着表单中的所有字段,例如:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87870.html
摘要:本文将列举四种不同原理的表单验证方法,并给出各方法在服务器上的实现。小结上述四种验证方法各有优缺点,用户应该根据需求选择不同的方法。 前言 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统,都不愿意把时间浪费在一些无效的信息上,必须对表单数据进行校验,若有不符合规定的表单输入,应及时返回并给出相应的提示信息。本文将列举四种不同原理...
摘要:本文将列举四种不同原理的表单验证方法,并给出各方法在服务器上的实现。小结上述四种验证方法各有优缺点,用户应该根据需求选择不同的方法。 前言 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统,都不愿意把时间浪费在一些无效的信息上,必须对表单数据进行校验,若有不符合规定的表单输入,应及时返回并给出相应的提示信息。本文将列举四种不同原理...
摘要:如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加标记。如果未修改,值为,如果修改过值为修改过的表单只要用户修改过表单,无论输入是否通过验证,该值都返回合法的表单这个布尔型的属性用来判断表单的内容是否合法。 借助AngularJS,我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然 Web应用安全不能完全依赖客户端验证,但客户端验证可以提供表单状态的实时反馈。 ...
摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...
摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...
摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...
阅读 1691·2021-11-18 13:20
阅读 1074·2021-10-11 10:59
阅读 2923·2021-08-24 10:01
阅读 3474·2019-08-29 14:21
阅读 3309·2019-08-29 14:15
阅读 3484·2019-08-26 12:23
阅读 3308·2019-08-26 11:46
阅读 3312·2019-08-26 11:35