1.显示效果

2,html结构

 <div class="border_bg">
<div id="upcCode" style="position:relative;">
<h3 style="color:#337ab7; margin:0 0 15px;">Please enter verification code</h3>
<form action="<?php echo JRoute::_('index.php?option=com_gnverification&view=gnverification&layout=edit'); ?>" method="post" id="code" class="form-inline">
<div class="form-group">
<label>Code:</label>
<input type="text" name="upcCd" id="upcCd" class="form-control"> </div>
<input type="submit" onclick="javascript:upTo(event);" value="Submit" class="btn btn-default" >
</form>
<div id="tooltiper" class="tooltip bootom fade in" style=" display: none; left:38px; border-radius:4px; "></div>
</div>
</div>

3,JavaScript实现

 <script type="text/javascript">
//本地判断输入的验证并给出错误提示
function upTo(e){
var upcCdNode =document.getElementById("upcCd");
var code=document.getElementById("code");
var upcCd =document.getElementById("upcCd").value;
var tooltiper =document.getElementById('tooltiper');
if(upcCd ==""){
preventSubmit(e,true)
showMsg(tooltiper,"Sorry! You did not enter the verification code.")
}else if(!/^[0-9]*$/.test(upcCd)){
preventSubmit(e,true)
showMsg(tooltiper,"Verification code you entered with Char!")
}else if(!/^[0-9]{12}$/.test(upcCd)){
preventSubmit(e,true)
showMsg(tooltiper,"The number you entered did not reach or greater than 12.") } }
//阻止表单提交
function preventSubmit(e,check){
e=e||window.event;
if(check){
if(document.all){
e.returnValue=false;
}else{
e.preventDefault();
}
} }
//显示输入错误
function showMsg(obj,msg){
obj.innerHTML=msg;
obj.style.display="block";
setTimeout(function(){
obj.innerHTML="";
obj.style.display="none";
},4000);
} </script>

纯js编写验证信息提示正则匹配数字,字母,空值的更多相关文章

  1. js正则匹配数字字母汉字

    1,匹配所有字母数字汉字:^[A-Za-z0-9\u4e00-\u9fa5]+$2,清空某项:$('#id').empty()3,某项功能关闭,不再执行:$('#id').off()4,查看数据类型: ...

  2. js截取相应的域名----正则匹配法 和校验Url 正则表达式

    js截取相应的域名----正则匹配法 和校验Url 正则表达式 用javascript截取相应的域名方法两种,供大家参考 1.方法1: [javascript] view plain copy fun ...

  3. 纯JS编写打地鼠游戏

    这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果: 上代码(HTML+JS): <!DOCTYPE html> < ...

  4. 1、纯python编写学生信息管理系统

    1.效果图 2.python code: class studentSys(object): ''' _init_(self) 被称为类的构造函数或初始化方法, self 代表类的实例,self 在定 ...

  5. js中的IP格式正则匹配校验详解~

    IPV4的格式为x:y:z:w,其中{x,y,z,w}属于{0~255}的正整数: 下面是其校验的正则表达式: function isIP(ip) { var re =  /^(\d{1,2}|1\d ...

  6. Java正则匹配数字

    包括5种形式,如测试结果 import java.util.Scanner; import java.util.regex.*; public class Com { public static vo ...

  7. php 正则匹配包含字母、数字以及下划线,且至少包含2种

    新系统注册功能需对用户名和密码做以下要求:包含字母.数字以及下划线,且至少包含2种: 在网上没有搜到符合要求的代码,于是自己对他人代码做了一点修改,经测试满足要求.代码如下: if (!preg_ma ...

  8. js:通过正则匹配获取页面的url中的参数

    简介:获取页面参数 原生js: //通过正则匹配获取当前页面的url中的参数 function getUrlParam(name){ var reg = new RegExp("(^|&am ...

  9. JavaScript | 基础表单验证(纯Js)

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

随机推荐

  1. Clang与libc++abi库安装

    系统ubuntu64位 Clang4.0 参考: 1 https://github.com/yangyangwithgnu/use_vim_as_ide#0.1 其中 第7章 工具链集成 2. htt ...

  2. 开放产品开发(OPD):OPD框架

    在 开放产品开发(OPD):开篇 中讲了一下OPD是什么,以及它主要指引的方法,这篇文字将给大家介绍一下OPD框架. 一个公司有三种经营模式,像游戏代理的属于运营型,做企业定制项目管理软件的属于项目型 ...

  3. 最新 DEDECMS SQL 注入 0day

    4月29日消息:国内安全研究团队“知道创宇”称截获到最新DEDECMS SQL注入0day,DEDECMS官网目前提供下载的最新版5.7也受影响,截止本告警发出时官方尚未给出补丁或解决方案,此漏洞利用 ...

  4. zabbix通过jmx监控tomcat

    Zabbix版本: Zabbix 3.0.2 一.服务端配置 1.安装jdk(版本1.7.0_79) 安装与配置比较简单,过程省略.执行java -version命令,出现类似界面表示成功.   2. ...

  5. 队列工厂之RedisMQ

    本次和大家分享的是RedisMQ队列的用法,前两篇文章队列工厂之(MSMQ)和队列工厂之RabbitMQ分别简单介绍对应队列环境的搭建和常用方法的使用,加上本篇分享的RedisMQ那么就完成了咋们队列 ...

  6. 依赖反转原则DIP 与 asp.net core 项目结构

    DIP 依赖反转原则 Dependency Inversion Principle 的定义如下: 高级别的模块不应该依赖于低级别的模块, 他们都应该依赖于抽象. 假设Controller依赖于Repo ...

  7. js获取IP地址方法总结

    js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338.html 1,js取得IP地址 ...

  8. .net core 集成 autofac.

    1. Install Install-Package Autofac Install-Package Autofac.Extensions.DependencyInjection 2.Startup ...

  9. pandas 读取excel的指定列

    不管对于read_csv还是read_excel,现在都有: usecols : int or list, default None If None then parse all columns, I ...

  10. [luogu 1660]数位平方和

    题目描述 定义S(n)表示n的各个数位的k次方的和.定义$H(n)=min{n,S(n),H(S(n))}$. 求$$\sum _{i=A} ^{B} {H(i)} \mod 10000007$$ 输 ...