Question

我正在尝试使用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！

Answer 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
}

Answer 2

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

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>

Answer 3

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

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

＆＃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;

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

3 个答案: