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 到 JQuery (1)学习小结
Feb 12 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
详解JS深拷贝与浅拷贝
Aug 04 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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 SPL标准库中的常用函数介绍
2015/05/11 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
介绍一下Ruby的特点
2013/01/20 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
年会活动策划方案
2014/01/23 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
晚归检讨书
2014/02/19 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
高一学生期末评语
2014/04/25 职场文书
食堂标语大全
2014/06/11 职场文书
碧霞祠导游词
2015/02/09 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Python实现Hash算法
2022/03/18 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python