javascript实现文本框标签验证的实例代码


Posted in Javascript onOctober 14, 2018

具体代码如下所述:

< !DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <title > Document < /title>
</head > <style type = "text/css" > body {
 background: #ccc;
}
label {
 width: 100px;
 display: inline - block;
}
span {
 color: red;
}.container {
 margin: 100px auto;
 width: 400px;
 padding: 50px;
 line - height: 40px;
}
span {
 margin - left: 30px;
 font - size: 12px;
} < /style>
<body>
<div class="container">
 <label>姓名不能为空</label > <input type = "text"id = "inp1" > <span > </span><br/ > <label > phone不能为空 < /label><input type="text" id="inp2"><span></span > <br / ></div>
<script>
 / / 失去焦点后判断用户输入是否为空
var inp1 = document.getElementById("inp1");
inp1.onblur = function() {
 if (trim(this.value) === "") {
 alert("输入不能为空");
 } else {
 alert("输入正确");
 }
};
function trim(str) {
 return str.replace(/^\s+|\s+$/g, "");
}
var inp2 = document.getElementById("inp2");
inp2.onblur = function(e) {
 if (inp2.value == "4444") {
 alert("正确");
e.stopPropagation();
 } else {
 alert("错误")
 }
}; < /script>
</body > 
</html>

总结

以上所述是小编给大家介绍的javascript实现文本框标签验证的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
vue项目实现减少app.js和vender.js的体积操作
Nov 12 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 #Javascript
详解webpack loader和plugin编写
Oct 12 #Javascript
深入理解Angularjs 脏值检测
Oct 12 #Javascript
vue中render函数的使用详解
Oct 12 #Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 #Javascript
You might like
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php经典算法集锦
2015/11/14 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python去掉字符串中空格的方法
2014/03/11 Python
详解python单例模式与metaclass
2016/01/15 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
商务英语求职自荐信范文
2013/12/24 职场文书
太太口服液广告词
2014/03/20 职场文书
安全标语大全
2014/06/10 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
中国梦读书活动总结
2014/07/10 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
典型事迹材料范文
2014/12/29 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书