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 相关文章推荐
director.js实现前端路由使用实例
Feb 03 Javascript
javascript中caller和callee详解
Aug 10 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
详解用JS添加和删除class类名
Mar 25 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
angular组件间通讯的实现方法示例
2020/05/07 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
JSF界面控制层技术
2013/06/17 面试题
总裁岗位职责
2013/12/04 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
自主实习接收函
2014/01/13 职场文书
节水标语大全
2014/06/11 职场文书
建筑安全责任书范本
2014/07/24 职场文书
联谊活动总结
2014/08/28 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python