无论有效的测试值如何,正则表达式始终返回true或始终为false

时间:2018-01-11 18:14:22

标签: javascript html regex wordpress

我正在尝试使用Regex验证表单字段。该字段应包含5个数字(即12345 =有效,1234a =无效,123456 =无效),即它。不多也不少。问题在于使用不同的正则表达式格式,.test()方法总是返回true,或者总是返回false。它从不适用于正确的值,并且对于不正确的值失败。所有正则表达式测试人员都成功地测试了正则表达式的JavaScript,但是当我将它添加到我的页面(WordPress)时,我遇到了这些问题。我读到了关于/ g字段应该删除并尝试了所有这些。仍然没有运气。

HTML:

<form name="newform" action="Create.php"  onsubmit="return validateForm()" method="POST" >
    Code <br/><br/><input id="code" class="form-control" type="text" value="" name="code"  onkeypress="CodeStyleRefresh()" />
    <button type="submit" id="submit" name="submit">Create</button>
</form>

JavaScript的:

<script type="text/javascript">
function validateForm(){
    var CodePattern = new RegExp(/\b\d{5}\b/);

    if(CodePattern.test(document.forms["newform"]["code"].value) == true)
    {
        return true;
}
    else
    {
        return false;
    }
}
function CodeStyleRefresh(){
    document.getElementById("code").setAttribute("style", "background-color: #ffffff;");
}
</script>

我尝试指定表达式的其他一些方法:

var CodePattern = new RegExp(/\b\d{5}\b/);
var CodePattern = new RegExp('/\b\d{5}\b/');
var CodePattern = /\b\d{5}\b/;
var CodePattern = '/\b\d{5}\b/';
var CodePattern = \b\d{5}\b;
var CodePattern = '\b\d{5}\b';

这是我第一次接触正则表达式,我也是JavaScript家族的新手。没有这么好的时光。

更新

我已经回归基础了。我的JavaScript现在基于一些建议看起来如下:

function validateForm(event)
{   
    console.log("Im running the script!");
    console.log(event.target.querySelector("[name=code]").value);

    var CodePattern = new RegExp(/\b\d{5}\b/);
    var codeVal = event.target.querySelector("[name=code]").value;

    if(CodePattern.test(codeVal) == true)
    {
        alert("Expression Passed!");
    }
    else
    {
        alert("Expression Failed!");
        return false;
    }
}

我的HTML现在是:

<form name="newform" onsubmit="return validateForm(event)" method="POST">
  Code
  <input id="code" class="form-control" type="text" value="" name="code" />
  <button type="submit" id="submit" name="submit">Create</button>
</form>

此表达式仍处于失败状态且警报表达式失败。

如果有帮助,我将JavaScript添加到WordPress页面,表单是同一页面上的普通html。我已经尝试将JavaScript添加到页眉和页脚,但这不会改变任何东西。我开始认为我应该检查字段的长度是否= 5,然后我可以将它转换为int而不是使用RegEx!

3 个答案:

答案 0 :(得分:1)

你的正则表达式很好。如果您只是在将代码上传到wordpress网站时收到错误,我很想说您的问题是您的背景,也许您有多个同名的表单?

尝试使用上下文代码,将html更新为:

<form name="newform" onsubmit="return validateForm(event)" method="POST">
  Code
  <input id="code" class="form-control" type="text" value="" name="code" onkeypress="CodeStyleRefresh()" />
  <button type="submit" id="submit" name="submit">Create</button>
</form>

你的javascript:

function validateForm(event){
    var myRegex = new RegExp(/\b\d{5}\b/);
    //event.target holds the node element that triggered the function in our case, the Form itself
    var myValue = event.target.querySelector("[name=code]").value; //here we find the input with the name=code inside the form that triggered the event

  return myRegex.test(myValue) //return true if it passed, false if not
}

答案 1 :(得分:1)

由于我无法在评论中插入这么多代码,我在这里发布一个答案,以显示它是如何运作的。

function validateForm(frm, evt)
{   
    var codeVal = frm.code.value;

    var CodePattern = /\b\d{5}\b/;

    // comment below line after testing
    evt.preventDefault();
    
    if(CodePattern.test(codeVal) == true)
    {
        console.log("Expression Passed!");
        return true;
    }
    else
    {
        console.log("Expression Failed!");
        return false;
    }
}
<form name="newform" onsubmit="return validateForm(this, event)" method="POST">
    Code <br/><br/>
    <input id="code" type="text" value="abc 12345 foo bar" name="code" />
    <input type="submit" id="submit" name="submit" value="Create" />
</form>

答案 2 :(得分:0)

感谢您提出的所有建议。我通过查看它们已经学到了一些东西,并且我做了一些改变。

然而,我无法让正则表达式在wordpress中正常工作。我不得不为此创造一个冗长,更脏的解决方案。我将继续查看可能的解决方案并测试其他wordpress站点,但是现在,这是我用来验证该字段的代码:

&#13;
&#13;
		function validateForm(frm, evt)
		{	
			var codeVal = frm.code.value;
			console.log("Code Value: " + String(codeVal));
			// comment below line after testing
			evt.preventDefault();
			
			var lenPass = false;
			var strlen = codeVal.length;
			
			if(strlen == 5)
			{
				lenPass = true;
			}
			
			if(lenPass)
			{
				var c1 = Number.isNaN(Number(codeVal.charAt(0)));
				var c2 = Number.isNaN(Number(codeVal.charAt(1)));
				var c3 = Number.isNaN(Number(codeVal.charAt(2)));
				var c4 = Number.isNaN(Number(codeVal.charAt(3)));
				var c5 = Number.isNaN(Number(codeVal.charAt(4)));
				
				console.log(c1);
				console.log(c2);
				console.log(c3);
				console.log(c4);
				console.log(c5);
				
				var pass = true;
				
				if(c1)
				{
					pass = false;
				}		
				if(c2)
				{
					pass = false;
				}
				if(c3)
				{
					pass = false;
				}
				if(c4)
				{
					pass = false;
				}
				if(c5)
				{
					pass = false;
				}
				
				if(pass)
				{
					alert("Expression Stage 2 Passed!");
					return true;
				}
				else
				{
					alert("Expression Stage 2 Failed!");
					return false;
				}
			}
			else
			{
				alert("Expression Stage 1 Failed!");
				return false;
			}
		}
&#13;
<html>
<head>
</head>
<body>
	<form name="newform" onsubmit="return validateForm(this, event)" method="POST">
		Code <br/><br/>
		<input id="code" type="text" value="" name="code" />
		<input type="submit" id="submit" name="submit" value="Create" />
	</form>
</body>
</html>
&#13;
&#13;
&#13;