JavaScript实现对表单用户名进行空白验证和长度验证-----JavaScript

已于 2023-11-10 14:45:02 修改
阅读量239 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript ecmascript react.js node.js 前端 vue.js js
于 2023-11-08 16:24:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134292653
版权 
<!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>

旧约Alatus
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery网页注册表单验证代码特效.zip
07-11
在网页开发中，用户输入的验证是至关重要的，它能确保数据的质量，防止错误的数据进入系统，保护服务器安全，...通过理解和实践这个代码，你可以提升自己的JavaScript和jQuery技能，更好地服务于网页应用的开发需求。
JS学习之表单验证
qq_42449963的博客
12-23 163
要求：
判断用户名的合法常用js代码
lifushan123的专栏
03-31 2655
//判断用户名的合法js代码 function checkUsername() { var username = document.getElementById("username").value; if( username == "" || username == null ){ 　　alert( "请先填写用户名！" ); 　　return false; } switch( isUsernam
js用户名和密码合法校验
u010234868的专栏
06-12 2115
<input type="text" id="userName"><br> <input type="text" id="userPassword"><br> <input type="button" id="btnLogin" value="登录"> .highLight { background-color: red; } // 检测用户名和密码 3-6 6-8位 不符合条件时背景高亮 都符合条件时执行登录 // 1. 获取元素 var
HTML5中margin属性应用
大数据-攻城狮
12-09 6552
Document div{ width: 100px; height: 100px; background-color: red; /* 外边距 */ margin-top: 30px; margin-left: 100px; margin-right: 100px;
JavaScript对输入的用户名密码等进行判断
热门推荐
weixin_53089473的博客
04-08 1万+
注册表实现以下功能 用户名：大于等于8，焦点离开是check 密码：大于等于8 密码确认：和密码一致 焦点离开是check 电子邮件：格式正确 焦点离开是check 生日：格式正确 9999/99/99 性别：默认是不选中 年纪：默认是不选中 可选项目兴趣介绍 保存是check 分了方便理解笔者吧check函数分开来写 1. 需要在文档出调用js函数 例如onblur="check_username()“ 就是指在鼠标焦点离开时调用函数checkuserna...
注册表单密码验证提示代码.zip
07-05
5. **用户名验证**：确保用户名是唯一的，并且符合一定的规则，比如不能包含特殊字符或空白字符。 "jiaoben4956.js" 文件很可能包含了实现以上功能的JavaScript代码。在JavaScript中，我们可以使用正则表达式...
一个完美的js表单验证案例
10-21
JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少了服务器的负担，并提供即时反馈。jQuery作为一个轻量级的JavaScript库，简化了DOM操作，动画效果，事件处理以及...
js表单登陆验证示例
11-26
JavaScript表单验证是网页开发中常见的一种功能，用于在用户提交数据前检查输入是否符合预设规则，确保数据的有效性和安全性。在这个示例中，我们看到一个简单的登录表单，它使用JavaScript进行客户端验证，避免无效...
js表单验证
11-28
常用的验证方法有`trim()`（去除空白）、`length`（检查长度）、`isNaN()`（判断是否为数字）等。 4. **反馈错误信息**：如果验证失败，应该向用户显示错误信息，这通常通过改变元素样式（如添加红色边框）或插入...
js中用户注册界面验证（31）
weixin_45147894的博客
05-27 1908
JavaScript校验要求： 1.每一项都必须填写内容或者做出选择，不能存在空项； 2.用户名：只能包含英文字母和下划线，长度为6-18个字符； 3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符； 4.确认密码：必须与密码相同； 5.联系电话：确保手机号码的有效性； 6.电子邮箱：确保电子邮箱的有效性； 7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。 ...
JavaScript
qq_60225495的博客
12-07 948
JavaScript 今日目标 掌握 JavaScript 的基础语法 掌握 JavaScript 的常用对象（Array、String） 能根据需求灵活运用定时器及通过 js 代码进行页面跳转 能通过DOM 对象对标签进行常规操作 掌握常用的事件 能独立完成表单校验案例 1，JavaScript简介 JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编
代码-JS之正则验证用户名
羊驼可以吃吗的博客
10-20 789
&amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot;
js 表单验证基本
weize_hh的博客
11-23 376
验证： 用户名不能为空 用户名长度6-10位 密码不能为空 密码不能少于6位 确认密码需一致 ​ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <style> </style> </head> &...
JS实现:判断密码是否为数字类型及验证码的长度是否符合要求
最新发布
无面人的博客
01-30 774
使用 javascript 来判断用户输入的密码是否为数字类型及输入的验证码长度是否符合要求
js检查密码长度
m0_54829066的博客
12-21 587
语句来检查密码的长度是否小于 8。如果密码长度小于 8，那么它会输出 "密码长度不够，请输入至少 8 个字符的密码。"，否则它会输出 "密码长度符合要求。注意，在实际应用中，你应该使用更复杂的密码检查机制，而不仅仅是检查密码长度。在这个例子中，我们使用了 JavaScript 的。你可以使用 JavaScript 的。属性来检查密码的长度。
JavaScript -- 检测用户名和密码位数是否正确
zn0128的博客
10-17 2644
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
JavaScript - 用户名表单验证
Codefreyy
04-02 1770
效果 代码 html： <input type="text" class="uname"> <span>请输入用户名</span> <div class="hint"></div> css： label { color: #ccc; } .right { color: green; }
【JS】正则验证用户名，密码，重复密码，密码强度
xxxxxwxx的博客
08-22 1416
要求：1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符3.重复密码 跟第一次输入 密码一致4.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳。
JavaScript高级教程：第6章-二维数组错误与表单验证
关于页面特效，本章涵盖了表单验证的高级技巧，如用图片替代提交按钮并实现实时验证，以及回车或Tab键切换的逻辑。制作即时提示错误特效通常涉及事件监听（如onChange）和DOM操作，当用户输入不符合规则时动态显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值