javascript 输入内容检测（正则表达式方法）不使用弹出窗口提示方法
2012-12-26 10:08
886 查看
昨天的文章 javascript 输入内容检测（正则表达式方法）里面使用的是弹出窗口警告输入了错误的内容
对于用户体验来说，弹出窗口是一个很不爽的过程，所以今天进行了简单的改写
效果为，当输入错误时，在输入框右边提示错误
html部分：
<div>
<input name="page_num" id="page_num" type="text" class="input" onkeyup="number()"/>
<span style="display:none" id="showPage">请输入数字</span>
<span id="startDateNotice" style="color:red;font-size:10px" ></span>
<input id="cheap_price" name="cheap_price" style="width:158px" type="text" onkeyup="number()">
<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</span>
<span id="sfeeNotice" style="color:red;font-size:10px" ></span>
</div>
相对于昨天，加上了一个隐藏的<span>
js代码：
1 . 首先获取元素
var Page_num=document.getElementById("page_num");
var cheap_price=document.getElementById("cheap_price");
var showPage=document.getElementById("showPage");
var showCheap=document.getElementById("showCheap");
2. 正则函数：
function Judge(k,m,n){
//k 是被判断的元素
//m是正则表达式，用来判断
//n是警告的显示元素
var patrn=m;
if (patrn.exec(k.value)) {
n.setAttribute("style","display:none;");
return;
} else{
if(k.value==""){
//n.setAttribute("style","display:none;");
return;
}else{
n.setAttribute("style","display:inline;");
n.setAttribute("style","color:red;font-size:10px;");
k.value="";
}
}
}
3. 使用函数
Judge(Page_num,/^\d+$/,showPage);
Judge(cheap_price,/^\d{0,8}\.{0,1}(\d{1,2})?$/,showCheap);
完整代码：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 输入内容检测</title>
<script type="text/javascript">
function number(){
var Page_num=document.getElementById("page_num");
var cheap_price=document.getElementById("cheap_price");
var showPage=document.getElementById("showPage");
var showCheap=document.getElementById("showCheap");
Judge(Page_num,/^\d+$/,showPage);
Judge(cheap_price,/^\d{0,8}\.{0,1}(\d{1,2})?$/,showCheap);
function Judge(k,m,n){
var patrn=m;
if (patrn.exec(k.value)) {
n.setAttribute("style","display:none;");
return;
} else{
if(k.value==""){
//n.setAttribute("style","display:none;");
return;
}else{
n.setAttribute("style","display:inline;");
n.setAttribute("style","color:red;font-size:10px;");
k.value="";
}
}
}
}
</script>
</head>
<body>
<div>
<input name="page_num" id="page_num" type="text" class="input" onkeyup="number()"/>
<span style="display:none" id="showPage">请输入数字</span>
<span id="startDateNotice" style="color:red;font-size:10px" ></span>
<input id="cheap_price" name="cheap_price" style="width:158px" type="text" onkeyup="number()">
<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</span>
<span id="sfeeNotice" style="color:red;font-size:10px" ></span>
</div>
</body>
</html>
对于用户体验来说，弹出窗口是一个很不爽的过程，所以今天进行了简单的改写
效果为，当输入错误时，在输入框右边提示错误
html部分：
<div>
<input name="page_num" id="page_num" type="text" class="input" onkeyup="number()"/>
<span style="display:none" id="showPage">请输入数字</span>
<span id="startDateNotice" style="color:red;font-size:10px" ></span>
<input id="cheap_price" name="cheap_price" style="width:158px" type="text" onkeyup="number()">
<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</span>
<span id="sfeeNotice" style="color:red;font-size:10px" ></span>
</div>
相对于昨天，加上了一个隐藏的<span>
js代码：
1 . 首先获取元素
var Page_num=document.getElementById("page_num");
var cheap_price=document.getElementById("cheap_price");
var showPage=document.getElementById("showPage");
var showCheap=document.getElementById("showCheap");
2. 正则函数：
function Judge(k,m,n){
//k 是被判断的元素
//m是正则表达式，用来判断
//n是警告的显示元素
var patrn=m;
if (patrn.exec(k.value)) {
n.setAttribute("style","display:none;");
return;
} else{
if(k.value==""){
//n.setAttribute("style","display:none;");
return;
}else{
n.setAttribute("style","display:inline;");
n.setAttribute("style","color:red;font-size:10px;");
k.value="";
}
}
}
3. 使用函数
Judge(Page_num,/^\d+$/,showPage);
Judge(cheap_price,/^\d{0,8}\.{0,1}(\d{1,2})?$/,showCheap);
完整代码：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 输入内容检测</title>
<script type="text/javascript">
function number(){
var Page_num=document.getElementById("page_num");
var cheap_price=document.getElementById("cheap_price");
var showPage=document.getElementById("showPage");
var showCheap=document.getElementById("showCheap");
Judge(Page_num,/^\d+$/,showPage);
Judge(cheap_price,/^\d{0,8}\.{0,1}(\d{1,2})?$/,showCheap);
function Judge(k,m,n){
var patrn=m;
if (patrn.exec(k.value)) {
n.setAttribute("style","display:none;");
return;
} else{
if(k.value==""){
//n.setAttribute("style","display:none;");
return;
}else{
n.setAttribute("style","display:inline;");
n.setAttribute("style","color:red;font-size:10px;");
k.value="";
}
}
}
}
</script>
</head>
<body>
<div>
<input name="page_num" id="page_num" type="text" class="input" onkeyup="number()"/>
<span style="display:none" id="showPage">请输入数字</span>
<span id="startDateNotice" style="color:red;font-size:10px" ></span>
<input id="cheap_price" name="cheap_price" style="width:158px" type="text" onkeyup="number()">
<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</span>
<span id="sfeeNotice" style="color:red;font-size:10px" ></span>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 测试使用jq的无alert检测提示form输入内容错误信息方法
- JavaScript使用正则表达式获取全部分组内容的方法示例
- iOS- 使用正则表达式NSRegularExpression 来验证textfiled输入的内容
- javascript使用正则控制input输入框允许输入的值方法大全
- iOS- 使用正则表达式NSRegularExpression 来验证textfiled输入的内容
- 简述JavaScript中正则表达式的使用方法
- javascript使用正则表达式检测IP地址
- javascript弹出窗口 window.open使用方法以及参数说明分析篇
- 正则表达式语法规则及在Javascript和C#中的使用方法
- Java使用正则表达式提取XML节点内容的方法示例
- 在JavaScript的正则表达式中使用exec()方法
- 如何使用Javascript正则表达式来格式化XML内容
- JavaScript检测弹出窗口是否已经关闭的方法
- javascript中使用正则表达式删除前后空格的方法
- 如何使用Javascript正则表达式来格式化XML内容
- .net 中使用Javacript弹出提示窗口方法总结
- 正则表达式语法规则及在Javascript和C#中的使用方法
- javascript中使用正则表达式删除前后空格的方法