使用表单onsubmit属性进行表单提交前js判定
2016-06-12 10:38
573 查看
项目是一个BBS论坛项目,需要在表单进行提交前判定标题是否为空,若为空的话则不允许进行提交。
一般的处理方式为:<button class="addBtn" onclick="submitForm()">发布主题</button>然后在submitForm()函数内部进行提交前的判定,最后进行提交或者输出提示后不提交。
但是感觉这样代码混杂度更高,使用onsubmit属性应该会使代码更加简洁。而且也不用手动调用submit()方法。
我的表单是这样的:
<form method="post" action="titles_Add.action" <span style="color:#ff6666;">onsubmit="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" onclick="submit()">发布主题</button>onsubmit属性实质上只是定义了表单提交前需要执行的方法。但是当其中加入了return关键字之后,即其内部运行结果为return false时,有阻止表单提交的作用,所以才有了此种用法。
一般的处理方式为:<button class="addBtn" onclick="submitForm()">发布主题</button>然后在submitForm()函数内部进行提交前的判定,最后进行提交或者输出提示后不提交。
但是感觉这样代码混杂度更高,使用onsubmit属性应该会使代码更加简洁。而且也不用手动调用submit()方法。
我的表单是这样的:
<form method="post" action="titles_Add.action" <span style="color:#ff6666;">onsubmit="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" onclick="submit()">发布主题</button>onsubmit属性实质上只是定义了表单提交前需要执行的方法。但是当其中加入了return关键字之后,即其内部运行结果为return false时,有阻止表单提交的作用,所以才有了此种用法。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享