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 对象成员的可见性说明
Oct 16 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
node.js实现上传文件功能
Jul 15 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
php实现数字补零的方法总结
2018/09/12 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
JS定时器实例
2013/04/17 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
初步剖析C语言编程中的结构体
2016/01/16 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
py-charm延长试用期限实例
2019/12/22 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
node中使用shell脚本的方法步骤
2021/03/23 Javascript
幼儿园教师自我鉴定
2014/03/20 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
创先争优个人总结
2015/03/04 职场文书
会议简报格式范文
2015/07/20 职场文书
退休欢送会致辞
2015/07/31 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书