1 <form>
2 <!-- 按钮选择点击 -->
3 <tr>
4 <td><input type="button" name="btn2" id="btn2" value="删除"
5 onclick="return confirm('Yes/No')"></td>
6 </tr>
7
8 <form>



1 <tr>
2 <!-- 按钮提示文字 -->
3 <td><input type="button" name="btn2" id="btn2" value="提示"
4 onclick="javaScript:alert('您确定要删除吗?')"></td>
5 <!-- 关闭页面 -->
6 <td><input type="button" value="关闭"
7 onclick="javaScript:window.close();"></td>
8 </tr>



javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得

  一、alert()

    

       

1 <script language="javascript"> //JavaScript脚本标注
2 alert("纸上得来终觉浅");//在页面上弹出上
3 alert("绝知此事要躬行");//在页面上弹出下
4 </script>

alert()是js的window对象的一个方法,调用时可以写成window.alert(),也可以写成alert(),功能都是产生一个带确认按钮的对话框,上面显示括号内的信息。

  二、confirm()方法

  confirm()方法与alert()方法的使用十分类似,不同点是在该种对话框上除了包含一个“确认”按钮外,还有一个“取消”按钮,这种对话框称为确认对话框,在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。

  在confirm()括号内添加了一段文本信息,运行效果如上图所示,如果用户单击“确认”按钮,则confirm()方法会返回true,如果用户单击“取消”按钮,则confirm()方法会返回false,无论用户选择哪个按钮,都会关闭对话框,而继续执行javascript代码。

  

1 <script language="javascript"> //js脚本标注
2 var con;
3 con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
4 if(con==true)alert("非常喜欢!");
5 else alert("不喜欢!");
6 </script>


  三、 prompt()方法

  alert()方法和confirm()方法的使用十分类似,都是仅仅显示已有的信息,但用户不能输入自己的信息,但是prompt()可以做到这点,不但可以显示信息,而且还提供了一个文本框要求用户使用键盘输入自己的信息,同时还包含“确认”或“取消”两个按钮,如果用户“确认”按钮,则prompt()方法返回用户在文本框中输入的内容(是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮,则prompt()方法返回null,我们称这种对话框为提示框。

  

<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框,
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框,
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>

alert()、confirm()、prompt()的区别和联系:

警告框alert()

alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。语法:alert("文本")。

确认框confirm()

confirm是确认框,两个按钮,确定或者取消,返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。语法:confirm("文本")

提示框prompt()

prompt是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。语法:prompt("文本","默认值")

JS验证三种提示框的更多相关文章

  1. JS基础 浏览器弹出的三种提示框(提示信息框、确认框、输入文本框)

    浏览器的三种提示框 alert() //提示信息框 confirm() //提示确认框 prompt() //提示输入文本框 1.alert( ) 提示信息框 <script> alert ...

  2. JQ三种提示框:提示信息框、确认框、输入文本框

    浏览器的三种提示框: alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框 1.alert()提示信息框 效果: 实现代码: <script> alert ...

  3. JS的三种弹框

    <script type="text/javascript"> /*第一种*/ function ale(){ alert("这是第一种");} / ...

  4. js的三种消息框alert,confirm,prompt

    原文:http://blog.csdn.net/lixiang0522/article/details/7764730 <html> <head> <script typ ...

  5. JS三种消息框的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  7. js实现删除确认提示框

    js实现删除确认提示框 一.实例描述 防止用户小心单击了“删除”按钮,在用户单击“删除”按钮后,给出一个提示,让用户确认此次操作是否正确. 二.效果 三.代码 <!DOCTYPE html> ...

  8. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  9. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

随机推荐

  1. ActiveMQ Cannot send, channel has already failed: tcp:127.0.0.1:8161

    仅针对如下错误内容: Cannot send, channel has already failed: tcp://127.0.0.1:8161 一种尝试解决,修改连接端口为 61616: tcp:/ ...

  2. Spark存储Parquet数据到Hive,对map、array、struct字段类型的处理

    利用Spark往Hive中存储parquet数据,针对一些复杂数据类型如map.array.struct的处理遇到的问题? 为了更好的说明导致问题的原因.现象以及解决方案,首先看下述示例: -- 创建 ...

  3. Geoserver对发布的数据源进行金字塔切片

    一.建立切片数据源 1.1建立工作区 1.2添加数据 我这里是老师给的高清卫星地图数据,格式为tif 工作区选择之前建立的工作区,浏览那里选择对应的文件 1.3建立切片源的图层 这里建立的图层中先不用 ...

  4. [原创] C# 金额大写

    突然要用到这个功能.也网上找了下. 最后还是自动动手写了一个. 估计这个还是有人要要的,所以顺便发出来吧. 引用保留 https://www.cnblogs.com/goldli/p/14105832 ...

  5. let和var变量的思考

    刚学JavaScript,纠结全局变量用var 还是 let. 这篇文章[来源于知乎]表示 在定义全局变量时,var 和 let 的作用相同. 那么现在基本遵守ES6规范的前提下,函数变量还是for循 ...

  6. OI学习过程记录

    这帖子本来是教练为了给低年级学生分享经验而让我写的学习经历,不过等我退役之后可能就变成回忆录了. 初三 WC 前:上了正睿的线上课程,练了一些模拟赛,同时也正在学文化课. 然后,莫名奇妙1膜考了全校前 ...

  7. 【WC2014】紫荆花之恋(替罪羊重构点分树 & 平衡树)

    Description 若带点权.边权的树上一对 \((u, v)\) 为 friend,那么需要满足 \(\text{dist}(u, v) \le r_u + r_v\),其中 \(r_x\) 为 ...

  8. 【APIO2019】桥梁(询问分块)

    Description 给定一张 \(n\) 个点,\(m\) 条边的无向图,边 \(i\) 的权值为 \(d_i\).现有 \(q\) 次操作,第 \(j\) 个操作有两种模式: \(1\ b_j\ ...

  9. 初入Nginx--配置篇

    Nginx的主配置文件为/path/to/nginx/nginx.conf.Nginx.conf的配置文件结构主要由以下几个部分组成: ..... events{ .... } http{ .... ...

  10. react项目中的一些配置

    react中事件优化使用babel插件 npm install babel-plugin-react-scope-binding --save-dev react中绝对路径引入文件:在根目录下增加js ...