<!DOCTYPE html> <!-- 这是HTML的注释 --> <html lang="en" id="myHtml"> <head> <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <style type="text/css"> span { color: red; font-size: 12px; } </style> </head> <body> <!-- JS包括三大块 dom指的是文档对象模型,对网页中的节点进行增删改查的过程 bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址) ecmascript是JS的核心语法ES标准 bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) --> <!-- 实际上bom是包含dom的 --> <!-- bom和DOM是包含关系 --> <script type="text/javascript"> window.onload = function() { var UF = document.getElementById("usernameError"); //通过浏览器窗体获取了html元素 document.getElementById("btn").onclick = function() { alert(btn); } document.getElementById("get").onclick = function() { alert(document.getElementById("txt").value); document.getElementById("nwx").value = "jack"; } var un = document.getElementById("username"); un.onblur = function() { username = un.value; username = username.trim(); if(username) { //代表非空 if(username.length < 6 || username.length > 14) { //用户名长度非法 UF.innerText = "用户名必须在6到14之间"; } else { //用户名长度合法 } } else { //代表空 //提示信息 UF.innerText = "用户名不能为空"; } } un.onfocus = function() { //这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理 if(UF.innerText != "") { //清空空格内容 un.value = ""; } //清空提示信息 UF.innerText = ""; } } </script> <input type="button" id="btn" value="hello"/> <input type="text" id="txt"/> <input type="button" id="get" value="获取文本的value"/> <input type="text" id="nwx"/> <input type="text" value="哈哈哈哈哈哈哈哈哈" onblur="alert(this.value)"/> <div> <table> <form> <tr> <th> 用户名: </th> <th> <input type="text" id="username"/> </th> <th> <span id="usernameError"></span> </th> </tr> <tr> <th> 密码: </th> <th> <input type="text"/> </th> </tr> <tr> <th> 确认密码: </th> <th> <input type="text"/> </th> <th> <span id="pwdError"></span> </th> </tr> <tr> <th> 邮箱: </th> <th> <input type="email"/> </th> <th> <span id="emailnameError"></span> </th> </tr> <tr> <th> 注册或重置 </th> <th> <input type="submit" value="注册"/> <input type="reset" value="重置"/> </th> </tr> </form> </table> </div> </body> </html>
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
<style type="text/css">
span
{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<!-- JS包括三大块
dom指的是文档对象模型,对网页中的节点进行增删改查的过程
bom浏览器对象模型(关闭浏览器窗口,打开一个浏览器窗口,后退前进,浏览器地址栏上的地址)
ecmascript是JS的核心语法ES标准
bom的顶级对象是window(浏览器窗口),dom的顶级对象是document(HTML文档) -->
<!-- 实际上bom是包含dom的 -->
<!-- bom和DOM是包含关系 -->
<script type="text/javascript">
window.onload = function()
{
var UF = document.getElementById("usernameError");
//通过浏览器窗体获取了html元素
document.getElementById("btn").onclick = function()
{
alert(btn);
}
document.getElementById("get").onclick = function()
{
alert(document.getElementById("txt").value);
document.getElementById("nwx").value = "jack";
}
var un = document.getElementById("username");
un.onblur = function()
{
username = un.value;
username = username.trim();
if(username)
{
//代表非空
if(username.length < 6 || username.length > 14)
{
//用户名长度非法
UF.innerText = "用户名必须在6到14之间";
}
else
{
//用户名长度合法
}
}
else
{
//代表空
//提示信息
UF.innerText = "用户名不能为空";
}
}
un.onfocus = function()
{
//这里要先检测再清空,这样就可以判断内容是否为空格组成用于清理
if(UF.innerText != "")
{
//清空空格内容
un.value = "";
}
//清空提示信息
UF.innerText = "";
}
}
</script>
<input type="button" id="btn" value="hello"/>
<input type="text" id="txt"/>
<input type="button" id="get" value="获取文本的value"/>
<input type="text" id="nwx"/>
<input type="text" value="哈哈哈哈哈哈哈哈哈" οnblur="alert(this.value)"/>
<div>
<table>
<form>
<tr>
<th>
用户名:
</th>
<th>
<input type="text" id="username"/>
</th>
<th>
<span id="usernameError"></span>
</th>
</tr>
<tr>
<th>
密码:
</th>
<th>
<input type="text"/>
</th>
</tr>
<tr>
<th>
确认密码:
</th>
<th>
<input type="text"/>
</th>
<th>
<span id="pwdError"></span>
</th>
</tr>
<tr>
<th>
邮箱:
</th>
<th>
<input type="email"/>
</th>
<th>
<span id="emailnameError"></span>
</th>
</tr>
<tr>
<th>
注册或重置
</th>
<th>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</th>
</tr>
</form>
</table>
</div>
</body>
</html>
JavaScript实现对表单用户名进行空白验证和长度验证-----JavaScript
于 2023-11-08 16:24:10 首次发布