JavaScript事件处理与DOM操作练习题

1.利用onblur事件实现文本框中英文字母全部转换成大写，效果如下所示

代码如下：

文本框中输入：<input type="text" id="t1" value="" onblur="upperCase(this)" />失去焦点后的： <input type="text" id="t2" value="" /><script type="text/javascript">function upperCase() {document.getElementById("t2").value = document.getElementById("t1").value.toUpperCase()}</script>

结果如图

2. 制作如下界面，实现用户名、密码和确认密码的验证，并给与一定的提示消息

1.先写出整体的框架和格式

<table border="1" align="center"><tr><td>账户:</td><td><input type="text" id="Username" onblur="op_1()" /></td><td id="td_1"></td></tr><tr><td>密码：</td><td><input type="password" id="password_1" onblur="op_2()" /></td><td id="td_2"></td></tr><tr><td>确认密码:</td><td><input type="password" id="password_2" onblur="op_3()" /></td><td id="td_3"></td></tr><tr><td>家庭住址：</td><td><select><option>--请选择省份--</option><option>河南</option><option>河北</option><option>河东</option><option>河西</option></select><select><option>--请选择城市--</option><option>天南市</option><option>天北市</option><option>天东市</option><option>天西市</option></select></td><td id="td_4"></td></tr><tr><td colspan="3" align="center"><input type="button" id="submit" value="提交" /></td></tr></table>

2.开始设置事件和接样式

<script type="text/javascript">function op_1() {var op = /^[a-zA-Z_]{6,}$/var Username = document.getElementById("Username").valueif (op.test(Username)) {document.getElementById("td_1").innerHTML = "用户名格式正确"return true} else {document.getElementById("td_1").innerHTML = "用户名格式错误"return false}}function op_2() {var op =  /^[a-zA-Z]\w{5,7}$/var password_1 = document.getElementById("password_1").valueif (op.test(password_1)) {document.getElementById("td_2").innerHTML = "密码输入正确"return true} else {document.getElementById("td_2").innerHTML = "密码输入错误"return false}}function op_3() {var password_1 = document.getElementById("password_1").valuevar password_2 = document.getElementById("password_2").valueif (password_2 == password_1) {document.getElementById("td_3").innerHTML = "密码输入正确"return true} else {document.getElementById("td_3").innerHTML = "密码输入错误"return false}}document.getElementById("submit").onclick=function(){if (op_1(),op_2(),op_3()==true) {alert("登陆成功")} else{alert("登陆失败")}}</script>

3.结果如图

JavaScript事件处理与DOM操作练习题相关推荐

js-day06-jQuery事件和DOM操作-练习题
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. <button οnclick="alert(1);">点我< ...
javascript 常用的dom操作及源生事件
javascript dom操作及源生事件获取dom节点操作dom节点源生事件 -- 绑定.解除事件源生事件 -- 事件派送获取dom节点 document.getElementById() ...
JavaScript(二)之DOM 操作
JavaScript之DOM 操作一.DOM 获取二.添加元素三.修改元素四.删除元素五.Web Storage 六.定时任务和延时操作一.DOM 获取文档对象模型简称 DOM,DO ...
JavaScript入门篇 - DOM操作
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法. DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代 ...
Javascript里使用Dom操作Xml
一．本笔记使用的Xml文件二．IXMLDOMDocument/DOMDocument简介 2．1 属性 2．1．1 parseError 2．1．2 async. 2．1．3 xml 2 ...
JavaScript教程之DOM和BOM
一:DOM操作 ##1. 介绍 ## dom: document object model 文档对象模型 DOM可以让我们通过javascript语言对html文档进行增.删.改.查操作. 为了方便j ...
04-前端技术_ javaScript内置对象与DOM操作
目录五,javaScript内置对象与DOM操作 1,JavaScript对象定义和使用 2,JavaScript内置对象 2.1 Array数组 2.1.1 创建方式 2.1.2 常用属性: 2. ...
Javascript核心DOM操作学习笔记
DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...
加速Javascript：DOM操作优化
原文:<Speeding up JavaScript: Working with the DOM> 作者: KeeKim Heng, Google Web Developer 在我们开发互 ...

JavaScript事件处理与DOM操作练习题

JavaScript事件处理与DOM操作练习题相关推荐

最新文章

热门文章