GetElementById


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" >/** 需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。<br/>* 验证的规则是:必须由字母,数字。下划线组成。并且长度是5到12位。* */function onclickFun() {// 1 当我们要操作一个标签的时候,一定要先获取这个标签对象。var usernameObj = document.getElementById("username");// [object HTMLInputElement] 它就是dom对象var usernameText = usernameObj.value;// 如何 验证 字符串,符合某个规则 ,需要使用正则表达式技术var patt = /^\w{5,12}$/;/**  test()方法用于测试某个字符串,是不是匹配我的规则 ,*  匹配就返回true。不匹配就返回false.* */var usernameSpanObj = document.getElementById("usernameSpan");// innerHTML 表示起始标签和结束标签中的内容// innerHTML 这个属性可读,可写usernameSpanObj.innerHTML = "XHC真可爱!";if (patt.test(usernameText)) {// alert("用户名合法!");// usernameSpanObj.innerHTML = "用户名合法!";usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";} else {// alert("用户名不合法!");// usernameSpanObj.innerHTML = "用户名不合法!";usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";}}</script>
</head>
<body>用户名:<input type="text" id="username" value="wzg"/><span id="usernameSpan" style="color:red;"></span><button onclick="onclickFun()">较验</button>
</body>
</html>

GetElementById相关推荐

  1. getElementById 使用

    getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用 里面跟着的必须是元素ID属性值,如果class的值是不可以的 一个小demo <!DOCTYPE html> ...

  2. document.getElementById与document.getElementsById的区别

    document.getElementById 是用Id选择元素,一个Id只对应一个元素. document.getElementsById 是用元素名称选择元素一个元素名称可能有很多元素,取的是集, ...

  3. document.getElementById与getElementByName的区别

    document.getElementById( "id_Number ")   得到的是单个元素 document.getElementsByName( "name & ...

  4. getElementById 不能取得visible=false 的控件解决方法

    想要绑定textbox的回车事件到一个按钮上,但不想显示这个按钮,如果你把这个button的visible设置为false,那么你使用 getElementById是获取不到的,或者说 取到的为空.这 ...

  5. HTML DOM getElementById() 方法

    定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用. 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素 ...

  6. document.getElementById()和document.forms[0].submit()

    下午,做一个jsp文件,涉及到document.getElementById()以及document.forms[0].submit()的使用,折腾了好长时间. 1.document.getEleme ...

  7. getElementsByName和getElementById获取控件

    js对控件的操作通常使用getElementsByName或getElementById来获取不同的控件进行操作 getElementsByName() 得到的是一个array, 不能直接设value ...

  8. getElementById getElementsByName的用法与区别(转)

    标签: getElementById  getElementsByName  getElementsByTagName getElementById: 语法: document.getElementB ...

  9. document.getElementById vs jQuery $()

    本文翻译自:document.getElementById vs jQuery $() Is this: 这是: var contents = document.getElementById('con ...

  10. linux访问网页元素,Linux_DOM和JAVASCRIPT访问页面上的元素,访问方法:getElementById() - phpStudy...

    DOM和JAVASCRIPT访问页面上的元素 访问方法: getElementById():返回拥用传递给该方法的指定id的第一个对象的引用. getElementsByName():返回拥用传递该方 ...

最新文章

  1. webview加载html跳转,WebView加载网页(二)
  2. 饥荒海难机器人怎么用_饥荒:海难是一款野外生存游戏
  3. 将Bitmap byte裸数据转换成Bitmap图片int数据
  4. Grpc+Grpc Gateway实践一 介绍与环境安装
  5. 轻松学Linux之使用转义字符
  6. python 3 廖雪峰博客笔记(三) 命令行模式与交互模式
  7. 调多大的角度 计算几何
  8. xml节点的添加和删除
  9. c# groupbox大小_【已解决】C#中使得控件随着WinForm窗体的大小改变而自动变化
  10. [Leetcode][第题][JAVA][两个数组的交集 II1][双指针][HashMap]
  11. 挖掘PubMed数据库,获取报道的或推测新的基因调控关系
  12. C# Win32API
  13. oppo9s刷机教程_oppor9s怎么自己刷机很简单的技巧
  14. Maven环境变量配置及是否成功
  15. LABjs、RequireJS、SeaJS 哪个最好用?为什么?
  16. 盘锦哪家计算机学校好,盘锦这所学校上了全国自主招生500强榜单
  17. easyUI的基本知识
  18. vue element 确认弹框中显示图片(message里)
  19. Word目录制作,添加目录自动跳转
  20. 金蝶mysql_金蝶财务软件如何导入新的数据库

热门文章

  1. git add出现 “fatal: in unpopulated submodule XXX“ 错误
  2. python3-输入华氏度转化为摄氏度
  3. 高性能计算机系统硬件结构图,硬件资源
  4. 惊呆了!我用 Python 可视化分析和预测了 2022 年 FIFA世界杯
  5. 恶意进程(云查杀)-DDOS木马
  6. Apache ShardingSphere 企业行|走进中商惠民
  7. JDBC Statement RETURN_GENERATED_KEYS返回自动生成的ID
  8. Hibernate自动建表
  9. windows下bison安装使用
  10. 我弟今年高考,报的志愿是电子信息,到现在录取的是计算机科学与技术,哪个专业更好一些,2021年电子信息科学与技术专业大学排名及分数线【统计表】...