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访问XML数据的实例
Dec 27 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
基于mysql的论坛(2)
2006/10/09 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python实现学校管理系统
2018/01/11 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
酒店副总经理岗位职责范本
2014/02/04 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
教师一岗双责责任书
2014/04/16 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
交通安全主题班会
2015/08/12 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android