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 相关文章推荐
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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
使用php4加速网络传输
2006/10/09 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python实现爬虫下载美女图片
2015/07/14 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python解决字符串倒序输出的问题
2018/06/25 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
最热门的自我评价
2013/12/30 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
同学会邀请函模板
2015/01/30 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书