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 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
js时间控件只显示年月
Jan 08 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Vue精简版风格概述
Jan 30 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue使用openlayers实现移动点动画
Sep 24 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php横向重复区域显示二法
2008/09/25 PHP
常规表格多表头查询示例
2014/02/21 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
VueJS全面解析
2016/11/10 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS一个简单的注册页面实例
2017/09/05 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
JS实现星星海特效
2019/12/24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
会计人员岗位职责
2014/03/19 职场文书
大型演出策划方案
2014/05/28 职场文书
大班上学期个人总结
2015/02/13 职场文书
教导主任个人总结
2015/03/03 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技