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 写类方式之一
Jul 05 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
JS eval代码快速解密实例解析
Apr 23 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
对Session和Cookie的区分与解释
2007/03/16 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php图片裁剪函数
2018/10/31 PHP
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
vue-cli配置环境变量的方法
2018/07/09 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
python实现端口转发器的方法
2015/03/13 Python
git进行版本控制心得详谈
2017/12/10 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python实现字符串和数字拼接
2020/03/02 Python
Python 面向对象部分知识点小结
2020/03/09 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
pandas按条件筛选数据的实现
2021/02/20 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
教师求职信范文分享
2013/12/27 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
初三开学计划书
2014/04/27 职场文书
党员创先争优活动总结
2014/05/04 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
争先创优演讲稿
2014/09/15 职场文书
法律讲堂观后感
2015/06/11 职场文书
教师节简报
2015/07/20 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python