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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
javascript数据类型详解
Feb 07 Javascript
Angular2数据绑定详解
Apr 18 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
JavaScript This指向问题详解
Nov 25 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
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
分析JS中this引发的bug
2017/12/12 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
python制作websocket服务器实例分享
2016/11/20 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
详解如何减少python内存的消耗
2019/08/09 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
90后毕业生的求职信范文
2013/09/21 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技