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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
总结js函数相关知识点
Feb 27 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue中监听路由参数的变化及方法
Dec 06 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/07/31 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
前端性能优化建议
2020/09/17 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python之pandas用法大全
2018/03/13 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
django创建超级用户过程解析
2019/09/18 Python
python处理excel绘制雷达图
2019/10/18 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
毕业生实习鉴定
2013/12/11 职场文书
春节联欢会主持词
2014/03/24 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
党员自我对照检查材料
2014/08/19 职场文书
档案工作汇报材料
2014/08/21 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
golang 实现两个结构体复制字段
2021/04/28 Golang
配置nginx 重定向到系统维护页面
2021/06/08 Servers
java版 简单三子棋游戏
2022/05/04 Java/Android