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
Nov 25 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 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表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
总结python中pass的作用
2019/02/27 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
python如何写try语句
2020/07/14 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
专科毕业生就业推荐信
2013/11/01 职场文书
初中生期末评语大全
2014/04/24 职场文书
干部考核评语
2014/04/29 职场文书
路政管理求职信
2014/06/18 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
公司奖励通知
2015/04/21 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
js判断两个数组相等的5种方法
2022/05/06 Javascript