输入空值时停止提交

2024-03-19

我正在寻找一个简单的解决方案来阻止登录表单提交空输入字段。表格的代码如下。如果可能的话,我想使用一个简单的 Javascript 解决方案。

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button>
</form>     

如果可能的话,我还想更改空字段的边框。

提前致谢。


带有虚拟检查的示例代码:

<script type="text/javascript">
function checkForm(form) {
    var mailCheck = checkMail(form.elements['email']),
        pwdCheck = checkPwd(form.elements['pwd']);
    return mailCheck && pwdCheck;
}

function checkMail(input) {
    var check = input.value.indexOf('@') >= 0;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}

function checkPwd(input) {
    var check = input.value.length >= 5;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}
</script>

<style type="text/css">
#login input {
    border: 2px solid black;
}
</style>

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button>
</form>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

输入空值时停止提交 的相关文章

  • React Native 将样式设置为 State

    我想用backgroundColor of style1作为一种状态 并在函数中改变它change 我怎样才能访问style1 我的观点是调用该函数change从另一个函数 使按钮将其颜色更改为黄色 然后在一段时间后再次将其颜色更改为蓝色
  • 如何检索 jquery $.ajax 对象的responseJSON属性[重复]

    这个问题在这里已经有答案了 我有这个 JavaScript ajax ajax type GET url DBConnect php data dataType json success function data error functi
  • 从字符串中删除货币符号并使用 Javascript 中的单行转换为数字

    我下面有一个字符串 它是以英镑为单位的价格 我想删除货币符号 然后将其转换为我可以用来与另一个值进行比较的数字 价格 例如 X gt Y 14 50 我之前已将字符串转换为用于货币的数字 var priceNum parseFloat pr
  • javascript获取上周的第一天和最后一天[重复]

    这个问题在这里已经有答案了 我想用 javascript 获取上周的第一天 星期一 和最后一天 星期日 我已经检查过其他主题 但它不起作用 我还需要处理前一周是否是两个不同的月份 我正在使用此代码 但最后一个星期日是 06 03 2014
  • 这个特定的 ReactJs 代码是如何执行的初学者问题?

    我是初学者 正在阅读大量代码 现在我想知道下面的代码我明白这段代码在做什么 我需要澄清的是代码流程 当我运行它时 我看到图像正在加载 React 是从上到下执行代码吗 占位符图像异步获得正确的图像 但会App如果需要时间 组件会开始渲染但没
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • angular.copy() 和 JSON.parse(JSON.stringify()) 之间的区别?

    有人可以解释 angular copy 和 JSON parse JSON stringify 之间的区别吗 有吗 您会推荐使用什么 angular fromJson angular toJson 与 JSON parse JSON str
  • IE 9 的子元素不透明,我无法使用 captify 阻止它

    好的 我正在使用一段名为 Captify 的 javascript 它为您的图像添加了一个带有文本的小弹出窗口 适用于所有接受 IE9 的浏览器 IE9 会淡化弹出 div 中的所有内容 我已阅读其子元素问题 但无法修复它 由于在网上任何地
  • Angular 2 最终版本路由器单元测试

    如何使用 karma 和 jasmine 对 Angular 2 0 0 版中的路由器进行单元测试 这是我的旧单元测试在版本 2 0 0 beta 14 中的样子 import it inject injectAsync beforeEac
  • 按自定义字母顺序对数组进行排序

    如何对这样的数组进行排序 apple very auto tom tim violet 要按 v a t x b 等排序 不按字母顺序 violet very auto tom tim 在脚本中 我会做这样的事情 myArray sort
  • 向 FTP 服务器执行跨域 XMLHTTPREQUEST 的语法是什么?

    我有一个 webDav CORS 插件 可以使用它在 webDav 服务器上 POST PUT GET REMOVE ALLDOCS 文件 我现在想对 FTP 做同样的事情 但我正在努力获取xmlhttprequest 工作语法 我只是收到
  • 如何获取调用函数的“this”值?

    如果我有一个这样的函数 function foo this console log this function bar bar prototype func function foo this var test new bar test f
  • 避免 AngularJS 部分视图在 IE 中缓存

    我正在开发一个 ASP NET MVC 应用程序 它也有一些 angularJS 我有一个主页 其中有不同的选项卡 当您单击它们时 它们会加载角度部分视图 主页是这样的 div class widget div div class widg
  • Node.js 和 Express:异步操作后如何返回响应

    我是 Node js 新手 所以我仍然对异步函数和回调很感兴趣 我现在的难题是如何在异步操作中从文件读取数据后返回响应 我的理解是发送回复的工作方式如下 这对我有用 app get search function req res res s
  • 获取键盘事件中的鼠标位置

    我试图在用户按住 Shift 键时出现选择轮 滚轮应以鼠标位置为中心 然而当我测试这个时 pageX and clientX两者在事件对象上都未定义 是否可以通过键盘事件获取鼠标坐标 不 只需跟踪mousemove事件并持续保存当前位置 以
  • CKEditor TypeError:c[a] 在 CodeIgniter 中未定义

    我正在尝试在基于 codeigniter 的网站中安装 CKEditor 并且我已按照本教程进行操作 Codeigniter 教程中的 CKEditor http nukium com developpement php framework
  • 在 Delphi XE 中将类作为过程的参数传递

    我需要做的是这样的 procedure A type of form var form TForm begin form type of form Create application form showmodal freeandnil f
  • JQuery 表单提交不发送帖子

    我在使用 JQuery 提交表单时遇到问题 当按下提交按钮时 表单会正确提交 但是当我尝试使用时 somebutton click function form myForm submit 我还尝试从 Chrome 控制台调用表单提交 表单未
  • JavaScript 数组中的负索引是否会影响数组长度?

    在javascript中我定义了一个像这样的数组 var arr 1 2 3 我也可以做 arr 1 4 现在如果我这样做 arr undefined 我也失去了对值的引用arr 1 所以对我来说 从逻辑上来说 arr 1 也是arr 但是
  • 垃圾收集器不适用于 NodeJS / Chrome 中的类型化数组

    我最初将其记录为原项目中的一个问题 https github com nodejs help issues 3590 它立即转移到帮助主题 没有很好的解释 所以现在我想在这里提问 如果我们在 NodeJS v14 v16 v17 中运行以下

随机推荐

  • Swift 中的@dynamicCallable 是什么?

    来自苹果的文档 The dynamicCallable属性让你可以调用named types就像你打电话一样 使用简单语法糖的函数 主要用例是动态语言互操作性 你为什么要使用 dynamicCallable而不是直接方法 dynamicCa
  • Angular 7 - 向动态创建的组件添加拖放行为

    这是我在 SO 上提出的上一个问题的延续 在声明组件选择器时添加指令 Angular 7 https stackoverflow com questions 56072516 add directives to component sele
  • VBA-Loop 和一些工作表

    我是一个初学者 我想在我的 Excel 文件的所有工作表中进行循环 除了第一个工作表 然而 下面的代码仅适用于第二个 您能解释一下这段代码有什么问题吗 非常感谢 Sub MobileTCalculation MobileTCalculati
  • Ivy、Ant、Jenkins - 在 Jenkins 构建上使用 是个好主意吗?

    我们将使用 Ivy 和 Ant 并且让 Jenkins 来完成我们的构建 我原本以为让詹金斯做一个
  • 如何使用Nashorn引擎调用Java对象

    我想使用 Nashorn 控制台来替代 Rails c 例如 我想调用Java方法从远程系统导入数据并执行数据迁移 我发现这非常有趣 https www baeldung com java nashorn https www baeldun
  • 带或不带 MSYS 的 MinGW makefile(del 与 rm)

    我正在使用 MinGW 在 Windows 上编译一些东西 我打电话mingw32 make直接来自cmd exe一切 我需要的 都工作正常 但是我发现我需要能够从 MSYS 环境进行编译 并且我遇到了问题copy and del命令不被识
  • 触摸事件不适用于 Cordova 应用程序的 ios 版本

    我有一个非常简单的科尔多瓦应用程序 它是默认科尔多瓦 设备就绪 模板的扩展 它有一个按钮 附加了一个简单的单击事件 可以看到这里在 iOS 模拟器上运行 以下是我的项目的代码 索引 html
  • 使用记录编辑器/Jrecord 解压 COMP-3 数字

    我根据 cobol copybook 创建了布局 布局快照 我尝试加载数据并选择相同的布局 它给我的某些列提供了错误的结果 我尝试使用所有二进制数字类型 类阶边缘 DIV 无 EDG 办公室 无 EDG 注册区域无 EDG 城市 无 EDG
  • 使用“lapply”对数据框 (R) 中的所有列进行缩排序

    我正在尝试应用Winsorize 函数使用lapply来自library DescTools 包裹 我目前拥有的是 data col1 lt Winsorize data col1 这本质上用基于分位数的值替换了极值 替换了以下数据 gt
  • 在Python中解析日期字符串

    我如何重写以下子句 if u in date category title month 1 elif u in date category title month 2 elif u in date category title month
  • Firefox 和 Chrome 填充之间的区别

    Firefox 和 chrome 在 css 中渲染填充的方式有所不同 在 Chrome 中显示正确的内容在 Firefox 中进行了额外填充 有办法解决吗 button font family helvetica arial font s
  • ({"key": "value"} = {}) 语法在 JavaScript 函数中的含义是什么

    我正在学习 JavaScript 课程 特别是 MongoDB 大学 M220JS 课程 在其中一个任务中 我遇到了类内函数声明的语法 static async getMovies filters null page 0 moviesPer
  • Azure Functions 绑定重定向

    是否可以在 azure 函数文件夹结构中包含 web config 或 app config 文件以允许程序集绑定重定向 假设您正在使用最新的 2017 年 6 月 Visual Studio 2017 函数工具 我根据以下发布的代码片段得
  • 如何将整个表格视图捕获为图像,从中创建 .pdf 并通过电子邮件发送

    这是我第一次尝试在 iOS 中创建 pdf 文件 我有一个表格视图 它生成我想要在 pdf 文件中呈现的所有数据 这是我的代码 用于将整个表格捕获为图像 从图像生成 pdf 并通过电子邮件发送 IBAction save id sender
  • PRG 模式是否有一个在验证失败时不会重定向的名称?

    我的网站遵循重定向后获取模式 似乎有两种方法可以处理失败的验证 任何一个 使用验证消息渲染页面 临时存储验证消息 并重定向到显示消息的 GET 这两种实现都遵循 PRG 模式吗 是否有更具体的方法来描述这两种模式 我问这个问题主要是为了教育
  • 文件 ld-linux-x86-64.so.2 中未定义版本 GLIBC_PRIVATE

    如果有人可以给初学者一些有关 gcc 版本问题的帮助吗 我遇到了这个问题 version GLIBCXX 3 4 20 not found 我点击链接后 如何在 CentOS 7 2 上使用 yum 安装 gcc 5 3 https sta
  • 静态变量顺序[重复]

    这个问题在这里已经有答案了 我对 C 中静态变量声明的顺序有疑问 当我运行这段代码时 static class Program private static int v1 15 private static int v2 v1 static
  • 具有虚函数的类的大小

    我正在修改 C 概念 但我坚持使用非常简单的代码 include
  • Dart 产生来自另一个流监听器的流事件

    我有一个函数可以生成stream的具体事件 现在我有一个来自存储服务的流 它有自己的事件 寻找一种方法在发生变化时产生我的事件storage stream 这段代码片段并不能解决问题 Stream
  • 输入空值时停止提交

    我正在寻找一个简单的解决方案来阻止登录表单提交空输入字段 表格的代码如下 如果可能的话 我想使用一个简单的 Javascript 解决方案