javascript验证表单字段有效性,使用checkValidity()方法和他的属性

 <script type="text/javascript">function LoginCheckValidity(){var txt="";var rmb1=document.getElementById("rmb1");if(rmb1.checkValidity()==false){if(rmb1.validitionMessage==undefined){txt="输入金额有误,金额10-200之间";}}else{txt="转账成功!";}document.getElementById("rmb1msg").innerHTML=txt;//setCustomValidity()为自定义信息var rmb2=document.getElementById("rmb2");rmb2.setCustomValidity("");if(rmb2.value==null || rmb2.value==""){rmb2.setCustomValidity("请输入金额!");}else if(rmb2.validity.rangeUnderflow){rmb2.setCustomValidity("金额不小于10元");}else if(rmb2.validity.rangeOverflow){rmb2.setCustomValidity("金额不大于200万");}else {rmb2.setCustomValidity("转账成功!");}document.getElementById("rmb2msg").innerHTML=rmb2.validationMessage;rmb2=null;rmb1=null;}var input=document.getElementsByName("submit1")[0];EventUtil.addHandler(input,"click",LoginCheckValidity);input=null;</script>

//html部分

<div style="width:500px"><div style="width:250px;height:30px;line-height:30px;float:left;background:green;text-align:right;">转账金额1:<input id="rmb1" type="number"  min="10" max="200" name="rmb1" required="" size="20"/></div><div style="width:250px;height:30px;line-height:1px;float:left;background:black;color:red;"><p id="rmb1msg"></p></div></div><div style="clear:both;"></div><div style="width:500px;margin-top:10px;"><div style="width:250px;height:30px;line-height:30px;float:left;background:green;text-align:right;">转账金额2:<input id="rmb2" type="number"  min="10" max="200" name="rmb2" required="" size="20"/></div><div style="width:250px;height:30px;line-height:1px;float:left;background:black;color:red;"><p id="rmb2msg"></p></div></div><div style="clear:both;"></div><div style="float:left;margin-top:10px;"><input type="submit" name="submit1" value="验证" /></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/145842.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

C/C++跨平台构建工具CMake-----在C++源码中读取CMakeLists.txt配置文件中的内容

文章目录 1.需求描述2.需求准备2.1 创建项目2.2 编辑CMakeLists.txt文件2.3 编写C文件2.4 编译构建项目 3.需求实现3.1 在CMakeLists.txt中输出日志信息3.2 增加配置生成C头文件3.3在C 源码中访问配置的值3.4 C文件中读取CMakeLists.txt中的字符串 总结 1.需求描述 当我们开发…

HTML之如何下载网页中的音频(二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Kafka(一)使用Docker Compose安装单机Kafka以及Kafka UI

文章目录 Kafka中涉及到的术语Kafka镜像选择Kafka UI镜像选择Docker Compose文件Kafka配置项说明KRaft vs Zookeeper和KRaft有关的配置关于Controller和Broker的概念解释Listener的各种配置 Kafka UI配置项说明 测试Kafka集群Docker Compose示例配置 Kafka中涉及到的术语 对于…

Linux—进程间通信之System V共享内存

目录 简介System V共享内存特点及用法 共享内存的创建共享内存的关联与去关联共享内存的删除共享内存通信代码实现总结 简介 System V共享内存是一种在Unix-like系统中广泛使用的共享内存机制。它是基于System V IPC&#xff08;Inter-Process Communication&#xff0c;进程间…

SpringBoot整合阿里云OSS文件存储解决方案

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Sp…

毛玻璃态登录表单

效果展示 页面结构组成 通过上述的效果展示可以看出如下几个效果 底部背景有三个色块并且效果是毛玻璃效果登录表单是毛玻璃效果登录表单的周围的小方块也是有毛玻璃效果并且与登录表单有层次效果 CSS3 知识点 filter 属性backdrop-filter 属性绝对定位属性动画属性 底部背…

(高阶) Redis 7 第16讲 预热/雪崩/击穿/穿透 缓存篇

面试题 什么是缓存预热/雪崩/击穿/穿透如何做缓存预热如何避免或减少缓存雪崩穿透和击穿的区别?穿透和击穿的解决方案出现缓存不一致时,有哪些修补方案缓存预热 理论 将需要的数据提前加载到缓存中,不需要用户使用的过程中进行数据回写。(比如秒杀活动数据等) 方案 1.…

idea Springboot 校园助学贷款系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 校园助学贷款系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统 具有完整的源代码和数据库&…

Ubuntu服务器安全性提升:修改SSH默认端口号

在Ubuntu服务器上&#xff0c;SSH&#xff08;Secure Shell&#xff09;是一种至关重要的远程连接工具。它提供了一种安全的方式来远程连接和管理计算机系统&#xff0c;通过加密通信来确保数据的保密性和完整性。SSH协议广泛用于计算机网络中&#xff0c;用于远程管理、文件传…

网络-Ajax

文章目录 前言一、Ajax优点&#xff1a;缺点&#xff1a; 二、使用步骤XNLHttpRequest对象完整代码 总结 前言 本文主要记录Ajax技术的简介&#xff0c;以及用法。 一、Ajax Ajax是一组用于在Web浏览器和Web服务器之间进行异步通信的Web开发技术。 它代表着Asynchronous Java…

解决大模型行业落地三大挑战,华为云GaussDB向量数据库正式发布

随着AI大模型产品及应用呈现爆发式增长,新的AI时代已经到来。向量数据库可与大语言模型配合使用,解决大模型落地过程中的痛点,已成为企业数据处理和应用大模型的必选项。在近日举行的华为全联接大会2023期间,华为云正式发布GaussDB向量数据库。GaussDB向量数据库基于GaussD…

Android 使用Kotlin封装RecyclerView

文章目录 1.概述2.运行效果图3.代码实现3.1 扩展RecyclerView 3.2 扩展Adapter3.3 RecyclerView装饰绘制3.3.1 以图片实现分割线3.3.2 画网格线3.3.3空白的分割线3.3.4 不同方向上的分割线 3.4 使用方法 1.概述 在一个开源项目上看到了一个Android Kotlin版的RecyclerView封装…

Docker和Docker compose的安装使用指南

一&#xff0c;环境准备 Docker运行需要依赖jdk&#xff0c;所以需要先安装一下jdk yum install -y java-1.8.0-openjdk.x86_64 二&#xff0c;Docker安装和验证 1&#xff0c;安装依赖工具 yum install -y yum-utils 2&#xff0c;设置远程仓库 yum-config-manager --add-r…

26962-2011 高频电磁场综合水处理器技术条件

声明 本文是学习GB-T 26962-2011 高频电磁场综合水处理器技术条件. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了高频电磁场综合水处理器(以下简称处理器)的术语和定义、分类和型号、结构型式、 要求及检验、标志、包装和贮运…

Java | Maven(知识点查询)

文章目录 Maven知识速查1. Maven概述2. Maven的作用3. Maven的下载4. Maven的环境配置5. Maven 的基础组成5.1 Maven仓库5.1.1 本地仓库配置&#xff1a;5.1.2 中央仓库配置&#xff1a;5.1.3 镜像仓库配置 5.2 Maven坐标 6. Maven项目6.1 手工创建Maven项目6.2 自动构建项目 7…

前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(三)

思维导图 全选案例 大按钮控制小按钮 小按钮控制大按钮 css伪类选择器checked <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…

理解自动驾驶感知技术

理解自动驾驶感知技术 文章目录 什么是自动驾驶感知技术&#xff1f;自动驾驶感知技术的关键组成部分1. 雷达&#xff08;Radar&#xff09;2. 摄像头&#xff08;Camera&#xff09;3. 激光雷达&#xff08;Lidar&#xff09;4. 超声波传感器&#xff08;Ultrasonic Sensors&a…

ElementUI实现登录注册啊,axios全局配置,CORS跨域

一&#xff0c;项目搭建 认识ElementUI ElementUI是一个基于Vue.js 2.0的桌面端组件库&#xff0c;它提供了一套丰富的UI组件&#xff0c;包括表格、表单、弹框、按钮、菜单等常用组件&#xff0c;具备易用、美观、高效、灵活等优势&#xff0c;能够极大的提高Web应用的开发效…

【Spring Cloud】深入探索 Nacos 注册中心的原理,服务的注册与发现,服务分层模型,负载均衡策略,微服务的权重设置,环境隔离

文章目录 前言一、初识 Nacos 注册中心1.1 什么是 Nacos1.2 Nacos 的安装&#xff0c;配置&#xff0c;启动 二、服务的注册与发现三、Nacos 服务分层模型3.1 Nacos 的服务分级存储模型3.2 服务跨集群调用问题3.3 服务集群属性设置3.4 修改负载均衡策略为集群策略 四、根据服务…