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 性能优化手册 推荐
Feb 23 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Node.js 中判断一个文件是否存在
Aug 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
使用PHP批量生成随机用户名
2008/07/10 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
Python 登录网站详解及实例
2017/04/11 Python
Python实现的端口扫描功能示例
2018/04/08 Python
三个python爬虫项目实例代码
2019/12/28 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
后勤工作职责
2013/12/22 职场文书
期末学生评语大全
2014/04/24 职场文书
2014年保密工作总结
2014/11/22 职场文书
优秀教师事迹材料
2014/12/15 职场文书
环卫工作个人总结
2015/03/04 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis