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

已于 2023-11-10 14:45:02 修改
阅读量240 收藏
点赞数 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
    评论
专栏目录
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判断账号和密码是否为空
最新发布
IKUNzhenin的博客
03-06 391
如果复选框没有被选中，那么显示一个提示框，内容是"请勾选平台协议"，然后经过1.5秒后隐藏提示框，并向用户提供相应的提示。如果输入框1和输入框2都是空的，那么显示一个提示框，内容是"请完善账号密码"，然后经过1.5秒后隐藏提示框。
JavaScript_表单校验用户名和密码
小丁的博客
11-14 826
- ^：匹配字符串的开头 - \w：匹配一个字母、数字或下划线 - {6,12}：指认由6到12个\w字符组成的重复次数 - $：匹配字符串的结尾
js检查密码长度
weixin_35752645的博客
12-21 113
你可以使用 JavaScript 的 length 属性来检查密码的长度。例如： let password ="mypassword"; if (password.length < 8) { console.log("密码长度不够，请输入至少 8 个字符的密码。"); } else { console.log("密码长度符合要求。"); } 在这个例子中，我们使用了 JavaSc...
jQuery网页注册表单验证代码特效.zip
07-11
在网页开发中，用户输入的验证是至关重要的，它能确保数据的质量，防止错误的数据进入系统，保护服务器安全，...通过理解和实践这个代码，你可以提升自己的JavaScript和jQuery技能，更好地服务于网页应用的开发需求。
注册表单密码验证提示代码.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. **反馈错误信息**：如果验证失败，应该向用户显示错误信息，这通常通过改变元素样式（如添加红色边框）或插入...
javaScript 简单验证代码（用户名，密码，邮箱)
11-30
代码如下:[removed] function IsDigit(cCheck) { return ((‘0′<=cCheck) && (cCheck<=’9’)); } function IsAlpha(cCheck) { return (((‘a'<=cCheck) && (cCheck<=’z’)) || ((‘A'<=cCheck) && (cCheck<=’Z’))) } function IsaNull(cCheck) { return(cCheck != ” “) } function checkform() { id = document
JavaScript -- 检测用户名和密码位数是否正确
zn0128的博客
10-17 2645
<!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.
JS实现:判断密码是否为数字类型及验证码的长度是否符合要求
无面人的博客
01-30 775
使用 javascript 来判断用户输入的密码是否为数字类型及输入的验证码长度是否符合要求
【JS】正则验证用户名，密码，重复密码，密码强度
xxxxxwxx的博客
08-22 1419
要求：1.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符2.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符3.重复密码 跟第一次输入 密码一致4.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳。
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
JavaScript对输入的用户名密码等进行判断
热门推荐
weixin_53089473的博客
04-08 1万+
注册表实现以下功能 用户名：大于等于8，焦点离开是check 密码：大于等于8 密码确认：和密码一致 焦点离开是check 电子邮件：格式正确 焦点离开是check 生日：格式正确 9999/99/99 性别：默认是不选中 年纪：默认是不选中 可选项目兴趣介绍 保存是check 分了方便理解笔者吧check函数分开来写 1. 需要在文档出调用js函数 例如onblur="check_username()“ 就是指在鼠标焦点离开时调用函数checkuserna...
代码-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代码
lifushan123的专栏
03-31 2655
//判断用户名的合法js代码 function checkUsername() { var username = document.getElementById("username").value; if( username == "" || username == null ){ 　　alert( "请先填写用户名！" ); 　　return false; } switch( isUsernam
js中用户注册界面验证（31）
weixin_45147894的博客
05-27 1908
JavaScript校验要求： 1.每一项都必须填写内容或者做出选择，不能存在空项； 2.用户名：只能包含英文字母和下划线，长度为6-18个字符； 3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符； 4.确认密码：必须与密码相同； 5.联系电话：确保手机号码的有效性； 6.电子邮箱：确保电子邮箱的有效性； 7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。 ...
JavaScript高级教程：第6章-二维数组错误与表单验证
关于页面特效，本章涵盖了表单验证的高级技巧，如用图片替代提交按钮并实现实时验证，以及回车或Tab键切换的逻辑。制作即时提示错误特效通常涉及事件监听（如onChange）和DOM操作，当用户输入不符合规则时动态显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值