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 相关文章推荐
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
详解jQuery中的easyui
Sep 02 jQuery
Vue运用transition实现过渡动画
May 06 Javascript
微信小程序如何实现在线客服功能
Oct 16 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
json跟xml的对比分析
2008/06/10 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript字符串对象
2017/01/14 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
基于python实现坦克大战游戏
2020/10/27 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
物流合作计划书
2014/01/10 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
委托书格式要求
2015/01/28 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript