纯js编写验证信息提示正则匹配数字,字母,空值
2015-10-10 09:54
751 查看
1.显示效果
2,html结构
3,JavaScript实现
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>
相关文章推荐
- 【JavaScript】javascript 方法 test()
- JS实现的车标图片提示效果代码
- 带左右箭头切换的自动滚动图片JS特效
- js调用跨域
- Javascript闭包
- clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
- js函数语句和表达式定义函数记录
- POST 上传 JSON 数据
- 页面内容排序插件jSort使用方法
- Jsoup学习之Jsoup类
- Jsoup学习之Whitelist类
- Jsoup学习之Document类
- JS动态改变select选择变更option的index值
- JS数组定义
- C#操作 JSON方法汇总
- js观察者模式
- 公历和农历转换的JS代码
- 使用 jsoup 对 HTML 文档进行解析和操作
- C# 技巧(3) C# 操作 JSON
- 使用json-lib封装json