a链接易混淆与form表单简易验证用法详解

链接可以说遍布互联网，比如你想提供一个可以跳转到百度首页的链接给网友，那么代码如下:

<a href="http://www.baidu.com">百度一下,你就知道</a>

而如果这个链接指向的网址你想在浏览器中的新窗口中打开，那么代码如下:

<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>

那如果我页面中有一堆的a链接都想在新窗口中打开呢？难道得为一个个链接添加 target="_blank" ？其实只需在页面中插入一个base标签就可以实现了，base标签一般是放到网页的head标签里面，base标签的代码如下:

<base target="_blank" />

下面区分下a链接容易混淆的知识点:

<a href="">这是一个空链接</a>
<a href="#">这是一个#链接</a>
<a href="javascript:;">这是一个'javascript:;'链接</a>

这三种其实是有区别的，第一种空链接点击后会刷新页面，而后面两种写法点击后不会刷新页面；

但是但是但是，第二种写法#链接其实还有一个独特的用法，比如以下代码:

<a href="#foot">这是一个#链接</a>
...
.此处省略很多页面内容.
...
<footer id="foot">这是页面底部
</footer>

如果一个页面内容很长，我们想在页面头部设置一个链接方便用户点击后直接跳转到当前页面的底部浏览就可以使用上面的写法来实现了，注意 href="#foot" 与 id="foot" 中的foot必须一致否则无效。

下面来个问题：

<a href="javascript:alert('这是href弹出的');" onclick = "javascript:alert('这是onclick弹出的');">这是一个链接</a>

你觉得哪个的js代码会执行呢？ 其实onclick的alert会先被执行。

注意onclick的'javascript:'可以省略不写,而href属性执行js代码时的'javascript:'不能省略。

下面来谈谈a链接调用函数易混淆的地方:

    <a href="javascript:fnHref();" onclick = "fnLink()">这是链接一</a><a href="javascript:fnHref();" onclick = "return fnLink()">这是链接二</a><a href="javascript:fnHref();" onclick = "return false;fnLink()">这是链接三</a><a href="javascript:;" onclick = "fnLink()">这是链接四</a><a href="#" onclick = "fnLink()">这是链接五</a><script>function fnHref(){alert(1);}function fnLink(){alert(2);}</script>

上面的script代码段其实写到a链接的前面或后面都可以正常运行，因为js有预解析机制。

链接一点击后:先弹2后弹1

链接二点击后:先弹2后弹1

链接三点击后:onclick事件触发后直接return false(程序返回假),后面的代码统统不执行,所以啥也没弹

链接四点击后:弹2然后没有然后了

链接五点击后:弹2然后没有然后了，其实链接五与链接四效果一模一样。

举一反三:其实form表单中的action(类似a链接里面的href)与onsubmit(类似onclick)写法类似。

    <form action="#" method="get" id="myform1" onsubmit="checkForm()"><label>用户名:</label><input type="text" placeholder="请输入用户名" name="username" /><label>密码:</label><input type="password" name="pw" /><input type="submit" value="注册" name="sub" /></form><script>function checkForm(){ /*当submit按钮被点击时会触发此函数*/if(myform1.username.value == '') {alert('用户名不能为空');                return false; //中止程序运行,终止action提交。}}</script>

转载于:https://www.cnblogs.com/jewave/p/5936899.html

a链接易混淆与form表单简易验证用法详解相关推荐

layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
【onsubmit】Form表单onsubmit事件用法详解
表单提交数据时,我们有时会用到onsubmit事件,那么onsubmit事件到底是干什么用的,在什么时候触发onsubmit事件以及如何使用onsubmit.本文章将向大家详细讲解onsubmit事件 ...
js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
Ext表单之loadRecord用法详解
[img]http://lovebeyond.iteye.com/upload/attachment/133355/c4778cd0-762d-3d20-b310-a186a61702ee.jpg[/ ...
php表单提交到数据库详解
一般朋友们逛一些网站的时候,想使用网站或者看到更多网站里的内容,网站会要求用户进行新用户的注册,网站会把新用户的注册信息存入数据库中,需要的时候再进行提取. 这样网站就会首先创建自己的数据库和对应的表 ...
form表单target的用法
2019独角兽企业重金招聘Python工程师标准>>> 偶然有一机会发现form表单的target的用法,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一form ...
Element Ui使用技巧——Form表单的校验规则rules详细说明；element的 form 表单rules详细用法
本文章是在项目开发时遇到问题看到的一片好文, 摘录自[博客园]–[逍遥云天]. 感谢作者地址 – https://www.cnblogs.com/xyyt/p/13366812.html 在 [逍遥 ...
表单提交enctype参数详解之：application/x-www-form-urlencode和multipart/form-data
application/x-www-form-urlencode 我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 默 ...

a链接易混淆与form表单简易验证用法详解

a链接易混淆与form表单简易验证用法详解相关推荐

最新文章

热门文章