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 相关文章推荐
jQuery简单实现banner图片切换
Jan 02 Javascript
Node.js的包详细介绍
Jan 14 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue-resourc发起异步请求的方法
Feb 11 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
神族 Protoss 历史背景
2020/03/14 星际争霸
收音机的保养
2021/03/01 无线电
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
详解python3百度指数抓取实例
2016/12/12 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python银行系统实现源码
2019/10/25 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python编写万花尺图案实例
2021/01/03 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
VC++笔试题
2014/10/13 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
就业自荐书
2013/12/05 职场文书
公积金转移接收函
2014/01/11 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
《风筝》教学反思
2016/02/23 职场文书