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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
微信小程序 教程之模板
Oct 18 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
js 解析 JSON 数据简单示例
Apr 21 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_connect与mysql_pconncet的区别详解
2013/05/15 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现合并两个数组的方法
2015/05/16 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
青年教师典范事迹材料
2014/01/31 职场文书
捐赠仪式主持词
2014/03/19 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
四年级小学生评语
2014/12/26 职场文书
教导主任个人总结
2015/03/03 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2015年女工委工作总结
2015/07/27 职场文书
篮球拉拉队口号
2015/12/25 职场文书