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 WEB操作方法分享
Feb 28 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
原生js实现日历效果
Mar 02 Javascript
原生js实现自定义滚动条组件
Jan 20 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
MVC模式的PHP实现
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php生成无限栏目树
2017/03/16 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
node网页分段渲染详解
2016/09/05 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python基本语法经典教程
2016/03/11 Python
python中返回矩阵的行列方法
2018/04/04 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
如何安装ruby on rails
2014/02/09 面试题
优秀学生获奖感言
2014/02/15 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python