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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 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判断表单复选框选中状态完整例子
2014/06/24 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
推荐dojo学习笔记
2007/03/24 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
定制FileField中的上传文件名称实例
2017/08/23 Python
python和opencv实现抠图
2018/07/18 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
会计毕业自我鉴定
2014/02/05 职场文书
《掌声》教学反思
2014/02/23 职场文书
起诉状范本
2015/05/20 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL