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操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
一段防盗连的PHP代码
2006/12/06 PHP
深入分析php之面向对象
2013/05/15 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Django中FilePathField字段的用法
2020/05/21 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
linux下进程间通信的方式
2013/01/23 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
水电工岗位职责
2014/02/12 职场文书
体育教学随笔感言
2014/02/24 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android