js表单验证,给出友好的提示

js验证表单

注意:

  1. 只做非空验证, 只是个小demo
  2. 学习思想,onblur onfocus onsubmit的使用,给出友好提示
  3. 网上有很多有良好,强大的控件,用于用户输入

代码实现

  • js代码
		<script>function check_form(form) {// 得到form表单的所有input标签var els = form.getElementsByTagName("input");for(var i = 0; i < els.length; i ++) {// alert(typeof(els[i].getAttribute("onblur")));// 有onblur失焦事件的input框if (typeof(els[i].getAttribute("onblur")) == "function" || typeof(els[i].getAttribute("onblur")) == "string") {if (!check_item(els[i])) {return false;}}}return true;}function check_item(obj) {// input标签的值var value = obj.value.trim();// 根据层级关系取到label标签var msgBox = obj.parentNode.getElementsByTagName("label")[0];// 选择标签名,如果是空,给出提示switch (obj.name){ case "name":					if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写姓名";return false;}case "age":if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写年龄";							return false;}/*case "gender": break;*/case "birthday":if (value == "") {msgBox.className = "change_color";msgBox.innerText = "填写生日";							return false;							}}return true;}function check_focus(obj) {var msgBox = obj.parentNode.getElementsByTagName("label")[0];// 当鼠标在文本框上,清空消息框msgBox.className = "change_color";msgBox.innerText = "";}</script>
  • 页面
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>table {width: 500px;text-align: center;}td {border-style: none;}.change_color {color: red;}</style><!-- 类选择器, 不符合条件, 改变label的颜色 --> <script>// 在上面</script></head><body><form action="post" onsubmit="return check_form(this)"><table align="center" border="1px" cellpadding="0" cellspacing="0"><tr><td>姓名</td><td><input type="text" name="name" onblur="check_item(this)" onfocus="check_focus(this)" /><label class="change_color"></label></td></tr><tr><td>年龄</td><td><input type="text" name="age" onblur="check_item(this)" onfocus="check_focus(this)" /><label class="change_color"></label></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="男" checked="checked"/><input type="radio" name="gender" value="女"/></td></tr><tr><td>生日</td><td><input type="text" name="birthday" onblur="check_item(this)" onfocus="check_focus(this)"/><label class="change_color"></label>						</td></tr>				<tr><td colspan="2"><input type="submit" value="提交"/><input type="reset" value="重置" /></td></tr>				</table></form></body>
</html>
  • 测试
  • 当我输入不填内容时,onblur,给出提示

  • 填年龄时,onfocus 清除后面的提示

  • 填写完整

  • 提交check_form判断,地址栏显示提交数据

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

conda安装特定版本的包

conda search python /*python 3.3.1 0 anaconda/pkgs/free*/ conda install python3.3.1 即是安装了python3.3.1

项目开发问题

开发过程中才用Gearman做后台计算&#xff0c;node做socket连接服务器和数据传输及基本验证&#xff0c;Gearman通过接收Action和参数后将相应的结果回调给node&#xff1b;node负责接收前端发送的action和参数给Gearman&#xff0c;并将Gearman计算的结果推送给前端&#xff0…

注册demo,使用jQuery异步验证账号是否存在

功能 jQuery验证账号是否存在form表单提交判断&#xff0c;失焦判断 界面 Ajax代码&#xff0c;验证用户rye1是否存在 function check_UserId() {$userId $("#userId").val();$.post("checkUserId","userId" $userId,function (result) { // 异…

虚拟机的网络连接模式

本文参考文章如下&#xff0c;感谢原作者&#xff1a; 《虚拟机的桥接模式和NAT模式》 https://blog.csdn.net/qq_40198004/article/details/89785806 1、桥接模式 桥接模式:直接连接物理网络&#xff0c;也就是连的你交换机的网络和你主机的IP在一个网段上&#xff0c;将虚拟…

自考感悟,话谈备忘录模式

引言&#xff1a; 2014年4月20号上午11:30&#xff0c;正式结束了自己的自学考试&#xff01;考完之后瞬间感觉放松了开来&#xff01;全身无力则是自己20号下午的唯一感受。放松了半天&#xff0c;今天回归正轨&#xff01;又回到了和生活息息相关的设计模式上来&#xff01;今…

小白教你用Java生成验证码

验证码生成效果一&#xff0c;生成验证码二&#xff0c;页面收到验证码三&#xff0c;验证验证码是否填写正确效果 点击验证码可切换 给出提示 一&#xff0c;生成验证码 package servlet;import java.io.IOException;import javax.servlet.ServletException; import jav…

modbus rtu 协议转DLT645-2007和DLT645-1997电表协议转换器定制,

现场会碰到现场数据为Modbus协议&#xff0c;但是后台系统为DLT645协议系统&#xff0c;本模块支持将工业ModbusRtu协议转换为电表国标协议DLT645协议&#xff0c;支持1997和2007俩种标准&#xff0c;只需要进行简单的配置&#xff0c;就可以实现Modbus 协议转DLT645协议&#…

关于pycharm deployment消失的问题

settings --> Appearance --> Menus and Toolbars 点开Tools文件夹&#xff0c;选中Tools中的一个子文件夹&#xff08;Deployment就放在了这个工具后面了&#xff09; 点击上面的号&#xff0c;选择choose action to add 搜索deployment&#xff0c;找到Deployment文…

顺序队列,循环队列,链队列

队列先看队列接口和结点类1. 顺序队列2. 循环队列3. 链队列先看队列接口和结点类 package com.lovely.queue;/** * 2020年4月26日下午2:42:44* * author echo lovely**/ public interface IQueue {public void clear(); // 将队列置空public boolean isEmpty(); // 判断队列是…

Fashion-MNIST数据集离线加载办法

从MXNet上下载了数据集&#xff0c;从其它地方下载的数据集会出现校验不通过而重复下载&#xff0c;使用书中代码就是在Mxnet上下载数据集&#xff1b;数据完全下载后&#xff0c;找到数据后&#xff0c;新建一个目录&#xff0c;譬如叫做./data/fashion-mnist&#xff0c;把数…

优先级队列

优先级队列优先级结点类优先级队列接口优先级队列具体实现测试优先级结点类 package com.lovely.queue;public class PriorityNode {/*** author echo lovely* 2020年6月7日下午8:52:08* 优先级结点类*/public Object data; // 结点数据域public int priority; // 结点的优先级…

残差网络(ResNet)

普通块 残差块 现在一个大概的理解是&#xff0c;增加x这条“短路”后&#xff0c;肯定优于&#xff08;恒等映射&#xff09;&#xff0c;可以考虑两种情况&#xff1a;可以拟合出远远高于&#xff08;恒等映射&#xff09;&#xff0c;或者根本拟合不出高于&#xff08;恒等…

AI绘画训练一个扩散模型-上集

介绍 AI绘画&#xff0c;其中最常见方案基于扩散模型&#xff0c;Stable Diffusion 在此基础上&#xff0c;增加了 VAE 模块和 CLIP 模块&#xff0c;本文搞了一个测试Demo&#xff0c;分为上下两集&#xff0c;第一集是denoising_diffusion_pytorch &#xff0c;第二集是diff…

顺序串的实现

顺序串接口查找增加...测试接口 package com.lovely.string;/*** * author echo lovely* 2020年6月9日下午6:44:31** 串的接口描述*/ public interface IString {public void clear();public boolean isEmpty(); public int length(); public char charAt(int i) throws Excep…

WPF多线程UI更新——两种方法

WPF多线程UI更新——两种方法 前言 在WPF中&#xff0c;在使用多线程在后台进行计算限制的异步操作的时候&#xff0c;如果在后台线程中对UI进行了修改&#xff0c;则会出现一个错误&#xff1a;&#xff08;调用线程无法访问此对象&#xff0c;因为另一个线程拥有该对象。&…

jdbc万能dao

jdbc万能dao一&#xff0c;为何封装万能dao二&#xff0c;代码实现一&#xff0c;为何封装万能dao 不用框架&#xff0c;纯jdbc连接数据库&#xff0c;会用到dao包&#xff0c;如果每个表都要写增删改查&#xff0c;一个dao至少四个方法&#xff0c;dao会有大量代码重复&#…

5月27日

其实前天我想说我有点理解我爸了 当年到福建的时候跟现在差不多吧 气候 方言 吃的 住的 跟自己原来习惯的完全是不同 恐怕人人都会问这到底是为了什么 能为了什么呢&#xff1f; 路走到这儿了 有的是自己选的 有的不是 但已经走到这里了 当时晚上到福建家里的 第二天醒来看 屋子…

二叉树的递归遍历

二叉树遍历一&#xff0c;什么是二叉树二&#xff0c;递归实现2.1 结点类描述2.2 三种递归2.2 测试一&#xff0c;什么是二叉树 在计算机科学中&#xff0c;二叉树是每个结点最多有两个子树的树结构。通常子树被称作"左子树"&#xff08;left subtree&#xff09;和&…

概率论的公理结构

样本点 一个随机事件出现的可能的结果叫做样本点。 类比平面几何&#xff0c;线、面、体也是由点组成的集合&#xff0c;研究的是点线面关系及性质&#xff0c;同样样本点也是组成事件&#xff08;集合&#xff09;的材料&#xff0c;是集合的基本元素&#xff0c;把这些样本…