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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
Javascript高级技巧分享
Feb 25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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实现ping
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
js 概率计算(简单版)
2017/09/12 Javascript
JS验证码实现代码
2017/09/14 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
python可视化实现代码
2019/01/15 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python实现FTP循环上传文件
2020/03/20 Python
python如何运行js语句
2020/09/09 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
信息技术毕业生自荐信范文
2014/03/13 职场文书
升学宴主持词
2014/04/02 职场文书
教师节活动主持词
2014/04/02 职场文书
职称评定个人总结
2015/03/05 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript