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实现图片按钮切换
Jan 12 Javascript
js获取页面description的方法
May 21 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python中 map()函数的用法详解
2018/07/10 Python
python使用多进程的实例详解
2018/09/19 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
用python实现一个简单的验证码
2020/12/09 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
2014元旦晚会策划方案
2014/02/19 职场文书
关于环保的活动方案
2014/08/25 职场文书
考察邀请函范文
2015/01/31 职场文书
介绍信格式样本
2015/05/05 职场文书
2016国培研修心得体会
2016/01/08 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python