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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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
杏林同学录(三)
2006/10/09 PHP
PHP错误处理函数
2016/04/03 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python 中split 和 strip的实例详解
2017/07/12 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
python自动生成证件号的方法示例
2021/01/14 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
非常详细的C#面试题集
2016/07/13 面试题
总经理司机职责
2014/02/02 职场文书
公务员考察材料范文
2014/12/23 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
教师节随笔
2015/08/15 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Python学习之os包使用教程详解
2022/03/21 Python