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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
前端使用crypto.js进行加密的函数代码
Aug 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
php读取mysql的简单实例
2014/01/15 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
使用Apache的rewrite
2021/03/09 Servers
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
毕业实习个人鉴定范文
2013/12/10 职场文书
食品安全汇报材料
2014/08/18 职场文书
党委班子对照检查材料
2014/08/19 职场文书
师德师风自查总结
2014/10/14 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2014年妇女工作总结
2014/12/06 职场文书
初中成绩单评语
2014/12/29 职场文书
领导欢迎词范文
2015/01/26 职场文书
八年级英语教学反思
2016/02/15 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android