`
一湖碧波
  • 浏览: 54600 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

onclick和onsubmit的用法

阅读更多

 

 <form name="form" action="#" method="post" onsubmit="check();">
	  <p><label>称呼:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="name" id="name" /></p>
	  <p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>
	  <p class="noborder"><input type="submit" value="submit" /><input type="reset" value="reset"/><p>
	  </form>
<script type="text/javascript">
function check(){
	var name=document.getElementById("name").value;
	var contens=document.getElementById("contents").value;
	if (name=="")
	{
		alert("用户名不能为空");
		exit();
	}
	if (content=="")
	{
		alert("内容不能为空");
		exit();
	}
}
</script>

 

onclick

 

<form name="form" action="#" method="post">
	  <p><label>称呼:</label><input type="text" name="name" id="name" /></p>
	  <p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>
	  <p class="noborder"><input type="button" value="submit" onclick="check()"/><input type="reset" value="reset"/><p>
	  </form>

<script type="text/javascript">
function check(){
	var name=document.getElementById("name").value;
	var contents=document.getElementById("contents").value;
	if (name=="")
	{
		alert("用户名不能为空");
	}
	if (contents=="")
	{
		alert("内容不能为空");
	}
}
</script>

 

获取输入内容的方法,可以使用form属性,直接调用,form中的变量的值。或者使用id来取值

 

<form name="form1" action="#" method="post">
<p><label>称呼:</label><input type="text" name="name2" id="name" /></p>
<p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>
<p class="noborder"><input type="button" value="submit" onclick="check()"/><input type="reset" value="reset"/><p>
</form>

<script type="text/javascript"> function check(){ var name=document.form1.name2.value; var contents=document.getElementById("contents").value; if (name=="") { alert("用户名不能为空"); } if (contents=="") { alert("内容不能为空"); } } </script>
 

 

 

分享到:
评论

相关推荐

    onsubmit阻止form表单提交与onclick的相关操作

    本文将详细讲解如何使用`onsubmit` 阻止表单提交以及与`onclick` 的相关操作。 1. **`return false` 的作用** 当在表单的`onsubmit`事件处理器中设置`return false`时,可以阻止表单的默认提交行为。这是因为...

    Event 对象的使用方法

    Event对象在Web开发中扮演着至关重要...理解并熟练使用这些属性和方法,可以让你创建更加交互性和响应性的Web应用。通过监听和响应各种事件,开发者可以创建丰富的用户体验,包括动态更新、用户验证和自定义交互效果。

    html5标签属性及使用方法教程

    全局属性如id、class、style、title和accesskey等可以被任何HTML元素使用,而事件属性如onclick、onmouseover、onload、onsubmit等允许元素在发生特定事件时执行JavaScript代码。 在进行网页开发时,我们应当关注...

    js和dom用法案例

    Window 对象提供了多种方法,如 `alert`、`confirm`、`navigate`、`setInterval` 和 `clearInterval`。`alert` 方法用于弹出消息对话框,`confirm` 显示带有确定和取消按钮的对话框。`navigate` 方法用于重定向到...

    javascript脚本实例大全

    7. **事件处理**:绑定和触发事件,如onClick、onSubmit、addEventListener等。 8. **AJAX**:异步JavaScript和XML,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 9. **ES6及后续版本的新...

    VBscript英文帮助手册.rar

    VBScript英文帮助手册不仅包含了以上所述的理论知识,还可能包含实际案例、示例代码以及详细的API参考,帮助开发者快速查找和理解特定函数或方法的用法。同时,提供的"教程阅读器下载.url"和"爱书吧 电子书 教程 让...

    javascript大事模型介绍_.docx

    本文将详细介绍三种主要的事件模型:原始事件模型、DOM2事件模型以及IE事件模型,并探讨它们的差异和使用方法。 首先,原始事件模型是所有浏览器都支持的基础模型。在此模型中,事件分为“输入事件”(如`onclick`...

    js中return false(阻止)的用法.docx

    这时可以在表单的`onsubmit`事件中使用`return false`来阻止表单的默认提交行为。 ```javascript function chkInput(form) { if (form.title.value === "") { alert("请输入文章标题!"); form.title.select(); ...

    图片做提交按钮和重置按钮编程技术

    总之,通过使用图片作为提交按钮和重置按钮,可以显著提升网页的设计美感和用户体验。但是,在实际应用过程中,需要注意各种细节问题,如兼容性、加载速度以及无障碍性等。希望本文能帮助读者更好地理解和应用这一...

    javascript大全

    事件处理器可以附加到元素上,如onClick、onSubmit等。现代JavaScript提倡使用addEventListener和removeEventListener方法来添加和移除事件监听器,以提高代码可维护性。 六、AJAX AJAX(Asynchronous JavaScript ...

    javascript手册教程

    事件处理是JavaScript与用户交互的关键,如onClick、onSubmit等,通过绑定事件监听器,我们可以响应用户的操作。 ES6(ECMAScript 2015)是JavaScript的一个重要版本,引入了类、箭头函数、模板字符串、解构赋值、...

    案例所需要的css+js文件

    3. 事件处理:如onClick、onSubmit等,使网页元素对用户操作作出反应。 4. DOM操作:Document Object Model提供了访问和修改HTML元素的方法,如getElementById、querySelector、innerHTML等。 5. AJAX:异步...

    VBS入门实例1.0.rar

    7. **文件操作**:FileSystemObject (FSO) 提供了一系列方法和属性,如OpenTextFile、WriteLine、Close等,用于读写文本文件,复制、移动或删除文件和目录。 8. **事件驱动编程**:在网页开发中,VBS可以结合HTML...

    js方法和函数.doc

    本文将深入探讨JavaScript中的方法和函数,以及与之相关的事件处理。 首先,我们来看一下文档中提到的一些正则表达式,它们用于验证各种输入数据的格式。例如: - `Require`:匹配任意非空字符。 - `Email`:验证...

    VBScript 语言参考手册.rar

    7. **事件处理**:在Web开发中,VBScript可以编写事件处理程序,响应用户的交互,如onClick、onSubmit等。 8. **示例和最佳实践**:VBScript语言参考手册通常会包含大量的示例代码,帮助读者理解如何在实际场景中...

    VBScript教程及语言参考(HTM)

    事件处理程序(如onClick、onSubmit)通过VBScript编写,响应用户的交互行为。ActiveXObject是VBScript在HTML中调用服务器端COM组件的关键。 7. **Web服务器脚本** 在ASP(Active Server Pages)环境中,VBScript...

    JScript 语言参考

    5. **对象和原型**:JScript 使用原型链实现继承,每个对象都有一个prototype属性,可以通过原型访问和修改对象的方法和属性。 6. **作用域**:JScript 有全局作用域和函数作用域,没有块级作用域。 7. **事件处理...

    VBScript参考语言

    6. **事件处理**:在Web开发中,VBScript常用于处理网页中的事件,如OnClick、OnSubmit等。 7. **错误处理**:使用On Error语句可以设置错误处理机制,例如`On Error Resume Next`允许程序在错误发生后继续执行。 ...

    javascript

    事件处理器可以绑定在元素上,如onClick、onSubmit,或者使用addEventListener。现代JavaScript推荐使用事件委托,提高性能且减少内存占用。 **5. 函数式编程** JavaScript支持函数式编程风格,如高阶函数、闭包和...

Global site tag (gtag.js) - Google Analytics