用js做一个输入框，在用户没有输入的时候不能提交并提示

最新推荐文章于 2021-09-05 16:49:40 发布
最新推荐文章于 2021-09-05 16:49:40 发布
阅读量5.1k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghaibing0903/article/details/40354365
版权
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css">

    </style>

    <script type="text/javascript">
        function Validate(){
            var txtname = document.getElementById("txt_name");
            var button = document.getElementById("btnValidate");
            var form = document.getElementById("testform");
            if(txtname.value.trim()==""){
                if (txtname.labels.length==1) {
                    var label=document.createElement("label");
                    label.setAttribute("for","txt_name");
                    form.insertBefore(label,button);
                    txtname.labels[1].innerHTML = "请输入姓名";
                    txtname.labels[1].setAttribute("style","font-size:9px;color:red;");
                }
            }
            else if(txtname.labels.length>1){
                form.removeChild(txtname.labels[1]);
            }
        }
    </script>
</head>
<body>
    <form id="testform">
        <label id="label" for="txt_name">姓名：</label>
        <input id="txt_name">
        <input type="button" id="btnValidate" value="验证" οnclick="Validate()"/>
    </form>

</body>
</html>
zhanghaibing0903
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现表单输入框提示
weixin_46143360的博客
03-16 1148
用js实现： 1.form表单提交：input框无输入内容，弹框进行提示。 2.验证密码和确认密码是否一致。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascrip...
JS使用正则表达式判断输入框失去焦点事件
10-16
在本例中，我们关注的是如何利用正则表达式和JavaScript事件处理来验证用户在输入框中输入的数据，特别是在输入框失去焦点（`onfocusout`事件）时进行验证。以下是关于这个话题的详细讨论： 1. **失去焦点事件**： ...
JavaScript实现表单中未选择或者未输入的控件进行提示（提示内容可自定义）
qq_44538205的博客
02-22 1805
在做实际的项目中突发奇想写的一个方法，可能有一些表单控件没有加入判断中去还望见谅 实例 msg设置需要提示的内容 &lt;input type="text" placeholder="请输入用户名" msg="请输入'用户名'" name="username" maxlength="16"&gt; JavaScript代码：方法循环表单中需要判断的控件提示后并且返回一个布尔
文本框输入信息，未输入的文本框会提示输入，并且未输入的文本框会变红
weixin_34151004的博客
07-24 1237
2019独角兽企业重金招聘Python工程师标准>>> ...
如何避免提交页面，信息未填写完善 就出现注册成功提示 基于js
weixin_34107739的博客
10-25 1058
基于bootstrip做好一个页面后，出现如下效果图 这个页面是未经过任何后端处理的页面，如果直接填写一个用户名 或者不填写任何东西都可以注册成功的，先来演示只输入一个用户名 就要可以注册成功的。 点击注册之后的页面， 再来演示 不输入的界面 点击注册的界面;\ 就会出现如下的结果： ---------------------------...
JS实现文本框的值输入不合规范的时候，点击按钮不能提交
ljh243581579的博客
10-13 2265
表单中使用onsubmit，当返回值为true的时候可以提交，false则不可以<form action="flow.php?step=act_change" method="post" onsubmit="return check();"> </form>JS部分 在提示信息正确的时候flag==1var flag=0; var flag1=0; function check(){
输入框只能输入0.5的倍数
03-18
这段代码会在用户在输入框中输入时实时检查值，如果输入的不是0.5的倍数，就会清空输入框并显示警告。 此外，标签“源码”提示我们可能会涉及到具体的代码实现，而“工具”可能意味着存在一些现成的库或者框架可以...
输入框邮箱下拉智能提示
06-01
标题中的“输入框邮箱下拉智能提示”是指在网页中设计的一种交互功能，它通常用于增强用户体验，当用户在输入框中输入邮箱地址时，系统会自动显示一个下拉列表，列出与已输入部分匹配的邮箱地址建议。这种功能常见于...
JS实现仿google、百度搜索框输入信息智能提示的实现方法
10-24
在`searchSuggest()`函数中，如果输入框的值不为空，就发送一个GET请求到服务器端的处理程序（如`SearchResult.ashx`），传入用户的输入作为参数。服务器端会根据这个参数返回相关的搜索建议。 ```javascript ...
js注册表单错误输入框红色圆角提示效果.zip
最新发布
09-27
在这些文件中，我们可以看到表单元素如`<form>`、`<input>`、`<button>`等，它们用于收集用户输入并触发表单提交。 2. **CSS**（Cascading Style Sheets）: 文件夹`css`内包含了样式表，可能包含`style.css`或其他...
使用Js验证表单，证失败进行提示
琅枫的博客
04-23 591
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check() { var form = document.getElementById("form"); // 获得form表单的id var user = form.
js 弹出输入框
小鹿
03-27 2万+
<script type="text/javascript"> var code = prompt("请输入我爱你："); if(code.text!="我爱你"){ alert("你真的不爱我么") }else{ alert("我不爱你,你是个好人") } </scr...
JavaScript------如何解决表单登录信息输入为空显示提示
weixin_34375054的博客
01-13 1087
&lt;form name="fname" method="post" action="../Home/Login" onsubmit="return My();"&gt; &lt;input type="text" name="user" /&gt; &lt;input type="submit&quot
js实现表单验证是否为空 为空则提示输入信息
爬楼梯的前端小白的博客
09-05 1918
用户输入信息为空 表单失去焦点时则显示提示信息 反之输入信息之后 则不显示要求用户输入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi...
js表单验证，并显示红色警告
digger_419的博客
03-17 6671
我们在表单输入数据的时候，往往需要对输入的数据进行验证，如字段非空，邮箱格式，手机号，电话号等等。下面我将最近使用的表单验证分享一下。 var checkObject = { checkUsername: function (value) { if(value == ""){ $("#username").attr("style", "di
表单JS弹出填写提示
weixin_30633949的博客
04-16 289
HTML <form id="form1" runat="server"> <div> <div style="margin-top:100px"> <asp:TextBox ID="TextBox1" runat="server" HintTitle="增加的内容信息标题" HintInfo="控制在100个字数内，标题...
javascript弹出浏览器的三种提示框：提示信息框、确认框、输入文本框
热门推荐
EGeek
09-27 6万+
浏览器的三种提示框： alert()提示信息框 confirm()提示确认框 prompt()提示输入文本框   1、alert()提示信息框 效果: 实现代码： &lt;script&gt; alert("Hello"); &lt;/script&gt;   2、confirm()提示确认框 效果: 实现代码： &lt;...
【JavaScript】表单即时验证，不成功不让提交
编程记录，亲测有效
10-25 3万+
不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！ 这个JavaScript的关键是onCheck()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊╮(╯▽╰)╭ 一、基本目标 一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示： 如果密码少于6位，而且两次输入密码不一致同样弹出提示，
js 实现判断表单中必填项并进行提示
clara8871的专栏
09-15 1万+
html form 中的onsubmit在点submit按钮时被触发。 如果return false;则结果不会被提交到action中去（也就是提交动作不会发生），如果不返回或者返回true，则执行提交动作。 action 属性">actionURL规定当提交表单时向何处发送表单数据。结论： 1.如果html中使用form的onsubmit进行提交前的数据验证，需要验证函数返回一个布尔值，
修改代码让点击提交按钮时输入内容不合法时在输入框下方显示提示信息
05-25
假设你的输入框的id是"input-box"，提交按钮的id是"submit-btn"，你可以添加一个空的span标签作为提示信息的容器，如下所示： ``` <input type="text" id="input-box"> <span id="error-message"></span> <button id="submit-btn">提交</button> ``` 然后，你可以使用JavaScript来监听提交按钮的点击事件，在点击事件中检查输入框的内容是否合法。如果不合法，将错误信息显示在提示信息的容器中。 ``` const inputBox = document.getElementById('input-box'); const errorMessage = document.getElementById('error-message'); const submitBtn = document.getElementById('submit-btn'); submitBtn.addEventListener('click', () => { const inputValue = inputBox.value; // 检查输入框的内容是否合法 if (inputValue.trim() === '') { errorMessage.textContent = '输入内容不能为空'; } else if (inputValue.length < 5) { errorMessage.textContent = '输入内容长度不能小于5'; } else { // 输入内容合法，清空错误信息 errorMessage.textContent = ''; // 在这里添加提交表单的代码 } }); ``` 上述代码会在点击提交按钮时检查输入框的内容是否合法，并将错误信息显示在提示信息的容器中。如果输入内容合法，则清空错误信息，并执行提交表单的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值