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 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
js实现星星海特效的示例
Sep 28 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自动加载的两种实现方法
2010/06/21 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
js命名空间写法示例
2015/12/18 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
Python ftp上传文件
2016/02/13 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Django实现随机图形验证码的示例
2020/10/15 Python
python实现学生信息管理系统源码
2021/02/22 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
.net C#面试题
2012/08/28 面试题
《曹刿论战》教学反思
2014/03/02 职场文书
开工典礼策划方案
2014/05/23 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
思想政治表现评语
2015/01/04 职场文书
颐和园英文导游词
2015/01/30 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python