javascript实现文本框标签验证的实例代码

具体代码如下所述：

< !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实现文本框标签验证的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • javascript 遍历验证所有文本框的值

    思路: 大家知道文本框input的type为text,所有我们只要遍历所有input,判断其type是否为text,然后再判断指定字段的值即可达到要求 具体代码如下: 复制代码 代码如下: var aa = document.getElementsByTagName("input"); var bb = 0; for(var i=0;i<aa.length;i++) { var avalue = aa[i].value; var atype = aa[i].type; if(at

  • js各种验证文本框输入格式(正则表达式)

    不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/><

  • jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax实现无刷新_鼠标离开文本框即验证用户名</title> <meta http-equiv="Content-Type&qu

  • JS文本框不能输入空格验证方法

    1.只是不能输入空格 复制代码 代码如下: <input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"> 2.不能输入空格及英文状态下的逗号 复制代码 代码如下: <input type="text" onkeyup="this.value=this.value.replace(/[, ]/g,'')"> 3. 复制

  • 鼠标焦点离开文本框时验证的js代码

    利用js来验证文本框的值 复制代码 代码如下: <script> function onblurs(){ if(frm.name.value==""){ alert("请输入您的名字!"); }else if(frm.funny.value==""){ alert("爱好不得为空哦!"); } } </script> <form name="frm"> <tr>

  • javascript 基于正则表达式的文本框验证代码

    1,不能为空 <input  type="text" onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 2,只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9

  • ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法

    Extjs的Regex的验证属性分两种情况,一种是只有红色提示框:另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来. 特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来否则会报"缺少对象": 比如: 复制代码 代码如下: { xtype:'textfield', fieldLabel: '邮政编码', name:'postCode', regex: /^[1-9]\d{

  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如"满100打5折,满200打4折,满500打3折"等等,这是作为一组方案来执行的,但是并不确定一组方案中有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证. 动态添加一组文本框: 复制代码 代码如下: var

  • javascript实现文本框标签验证的实例代码

    具体代码如下所述: < !DOCTYPE html > <html lang = "en" > <head > <meta charset = "UTF-8" > <title > Document < /title> </head > <style type = "text/css" > body { background: #ccc; } labe

  • jQuery添加和删除输入文本框标签代码

    jQuery添加和删除输入文本框标签代码

    先给大家展示效果图,如果大家觉得还不错,请继续参考实现代码. 废话不多说了,直接给大家贴代码了. 代码如下: <!DOCTYPE html> <html> <head> <title>jquery删除添加输入文本框</title><base target="_blank" /> <meta charset="utf-8"> <link rel="stylesheet&

  • javascript数字验证的实例代码(推荐)

    javascript数字验证的实例代码(推荐)

    现在有一个需求如下图: 产品经理说Card Number只能让输入数字(中间的空格是格式自加的,也是用js实现的),有时候我脑海中出现了个声音,啥玩意,加个type=number不就行了,事实发现图样图森破了,先不说type=number后面会有个上下标(虽然用css可干掉),但是这个类型是支持科学输入法的,就是小数点和e这样的是可以输入的,于是乎只能用其他的方式了,后来想用检索到输入了非数字就干掉,但是这样还是能输入,想法被打回,于是乎最终采用了键盘输入控制的办法,其实很简单, 代码如下: v

  • jQuery完成表单验证的实例代码(纯代码)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"

  • 表单验证正则表达式实例代码详解

    表单验证正则表达式实例代码详解

    表单验证正则表达式具体内容如下所示: 首先给大家解释一些符号相关的意义 1.  /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. * 匹配前面的子表达式零次或多次:        + 匹配前面的子表达式一次或多次:        ?匹配前面的子表达式零次或一次:        \d  匹配一个数字字符,等价于[0-9] 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <h

  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

  • JavaScript操作select元素和option的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <title></t

  • 实时监控文本框输入字数的实例代码

    实时监控文本框输入字数的实例代码

    需求:实时监控文本输入框的字数,并加以限制 1.实时监控当前输入字数,直接使用onkeyup事件方法,给输入框加maxlength属性限制长度.如: <div> <textarea id="txt" maxlength="10"></textarea> <p><span id="txtNum">0</span>/10</p> </div> var tx

  • Layui Form 自定义验证的实例代码

    1.前台页面 <div class="layui-form-item"> <label class="layui-form-label">BOM编号</label> <div class="layui-input-block"> <input type="text" class="layui-input" name='code' lay-verify=&

  • jQury Ajax使用Token验证身份实例代码

    因为最近做了几个后台,所以经常会涉及到Token验证身份操作后台,所以这里记录一个如何向后台传请求头和Token. success:function(dat){ console.log(dat); if(dat.code==1){ sessionStorage.setItem('token',dat.data.access_token); //这里设置缓存存储Token sessionStorage.setItem('user',userName); location.href = "index

随机推荐