使用表单onsubmit属性进行表单提交前js判定

项目是一个BBS论坛项目,需要在表单进行提交前判定标题是否为空,若为空的话则不允许进行提交。

一般的处理方式为:

<button class="addBtn" οnclick="submitForm()">发布主题</button>
然后在submitForm()函数内部进行提交前的判定,最后进行提交或者输出提示后不提交。

但是感觉这样代码混杂度更高,使用onsubmit属性应该会使代码更加简洁。而且也不用手动调用submit()方法。

我的表单是这样的:

<form method="post" action="titles_Add.action" <span style="color:#ff6666;">οnsubmit="return checkinput()"</span>>
如此定义的时候提交前会先进入checkinput()方法,若方法返回false则不提交表单。返回true才会提交表单。

checkinput()方法如下:

function checkinput(){   
	var title = document.getElementById("title").value;
	if(title ==  null || title == ''){
		alert("标题不能为空");
		return false;
	}  
	return true;
}
但是这样做的话提交必须使用<input>标签定义提交按钮,即:

<input class="addBtn" type="submit" value="发布主题" />

若手动调用submit()方法的话,onsubmit阻止提交的作用不会生效,程序会在运行checkinput方法后继续运行submit()方法进行提交。

比如下面这种提交方式就无法阻止提交,但仍会执行checkinput方法并输出语句:

<button class="addBtn" οnclick="submit()">发布主题</button>
onsubmit属性实质上只是定义了表单提交前需要执行的方法。但是当其中加入了return关键字之后,即其内部运行结果为return false时,有阻止表单提交的作用,所以才有了此种用法。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值