php7教程栏目介绍留言板开发用到的js验证

推荐(免费):PHP7教程
本节JS关键词有:function、onsubmit、onclick、document.getElementsByTagName(这些在前端开发中是常用的,所以必须掌握)
根据步骤一的页面基础上加入JS验证表单事件,提升用户体验,也确保后端接收到的用户提交的数据是预定的。
立即学习“PHP免费学习笔记(深入)”;
拿到需求的时候不要急着敲代码,首先确认一下需要用的到知识点,理清思路,脑子里大概有个方案,特别是当下新技术天天新花样的时代,我们更应该思路要时刻保持清晰,不管是原生的js还是jquery或者是其他前端框架,万变不离其宗,只有稳固的js基础,方能走天下。
下面原生JS验证留言板表单的时候也是有多种方法可以实现的,这里用的是其中一个常用的,你能发现其他方法吗,可以在评论区分享个大家,好东西,就是要分享的!~
方法:
-
1、确定触发鼠标点击事件方式,如
onclick,onsubmit,xxx.click(function(){})等等(诸多验证方式,需要你们日后慢慢发现,神奇的JS世界等着你);我给留言板submit按钮添加了
onclick事件,为了触发checkform函数激活表单验证;然后又给了form标签添加了onsubmit="return false;"属性,为了阻止form表默认的提交事件(阻止事件冒泡);具体看代码并进行实践试试看~
a、示例代码片段 -
2、定义JS函数;
a、函数命名以
function开头
b、选中表单元素用document.getElementsByTagName('input')
c、阻止冒泡(阻止表单提交,验证成功才能提交)用return false;
d、脚本触发表单提交用document.feedback_form.submit();,feedback_form为form表单的name名称 -
3、submit标签中绑定鼠标点击事件触发我们定义的JS函数,如表单submit标签属性加入
onclick="函数名"a、示例代码片段
完整代码:
留言板_科科分享
留言板
FEEDBACK
实践,实践,实践。重要的事情喊三遍!!!
好啦,原生JS验证我们的留言板就到这里,如你有其他验证方式或者有什么疑惑,欢迎在评论区涂鸦!~











