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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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
笑谈配置,使用Smarty技术
2007/01/04 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
python封装对象实现时间效果
2020/04/23 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python使用django搭建web开发环境
2017/06/09 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
使用python制作一个解压缩软件
2019/11/13 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python批量启动多线程代码实例
2020/02/18 Python
python实现扫雷游戏
2020/03/03 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
在线服装零售商:SheIn
2016/07/22 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
土木工程专业自荐信
2013/10/04 职场文书
简短大学毕业感言
2014/01/18 职场文书
护士实习求职信
2014/06/22 职场文书
教师工作表现评语
2014/12/31 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
法定代表人免职证明
2015/06/24 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android