您的位置:首页 > Web前端 > JavaScript

纯js编写验证信息提示正则匹配数字,字母,空值

2015-10-10 09:54 751 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: