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