javascript 输入内容检测（正则表达式方法）不使用弹出窗口提示方法

短命女 2022-04-14 02:16 89阅读 0赞

昨天的文章 javascript 输入内容检测（正则表达式方法）里面使用的是弹出窗口警告输入了错误的内容

对于用户体验来说，弹出窗口是一个很不爽的过程，所以今天进行了简单的改写

效果为，当输入错误时，在输入框右边提示错误

html部分：

<div>

<span style="display:none" id="showPage">请输入数字</span>

<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</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>

<head>

<title>javascript 输入内容检测</title>

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>

<span style="display:none" id="showPage">请输入数字</span>

<span style="display:none;" id="showCheap">请以“39.90”类格式输入价格</span>

</div>

</body>

</html>

javascript 输入内容检测（正则表达式方法）不使用弹出窗口提示方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 正则表达式提示

相关 JavaScript详解正则表达式并使用正则表达式-----JavaScript

相关弹出提示窗口

相关 JavaScript 正则表达式--replace() 方法

相关 ⑤JavaScript 字符串的相关方法、正则表达式

相关 JavaScript String RegExp 正则表达式相关方法

相关 JavaScript弹出新窗口的方法

相关 js输入框使用正则表达式校验输入内容示例

相关正则表达式抠出指定内容

相关 javascript 输入内容检测（正则表达式方法）不使用弹出窗口提示方法