我在表单上编写的验证有一个奇怪的问题。这是输入旁边的“检查用户名”按钮。输入的默认值是用户名,例如’betamax’。当我按“检查用户名”时,它会通过正则表达式并将用户名发送到服务器。服务器的行为符合预期,并返回“ 2”以告诉javascript他们正在提交自己的用户名。
然后,当我再次单击该按钮时,正则表达式将失败。显然没有任何内容发送到服务器,因为正则表达式已失败。如果我再次按下按钮,则正则表达式会通过,然后将用户名发送到服务器。
我实际上无法弄清楚它将使它执行此操作的原因!对我来说完全是无稽之谈!
编辑:我已经测试了Firefox和Chrome中的问题(mac)
这是我的代码:
$j("#username-search").click(checkUserName); function checkUserName() { var userName = $j("#username").val(); var invalidUserMsg = 'Invalid username (a-zA-Z0-9 _ - and not - or _ at beginning or end of string)'; var filter = /^[^-_]([a-z0-9-_]{4,20})[^-_]$/gi; if (filter.test(userName)) { console.log("Pass") $j.post( "/account/profile/username_check/", { q: userName }, function(data){ if(data == 0) { $j("#username-search-results").html("Error searching for username. Try again?"); } else if(data == 5) { $j("#username-search-results").html(invalidUserMsg); } else if(data == 4) { $j("#username-search-results").html("Username too short or too long."); } else if(data == 2) { $j("#username-search-results").html("This is already your username."); } else if(data == 3) { $j("#username-search-results").html("This username is taken."); } else if(data == 1){ $j("#username-search-results").html("This username is available!"); } }); } else { console.log("fail") $j("#username-search-results").html(invalidUserMsg); } return false; }
HTML:
<input name="username" id="username" value="{{ user.username }}" /> <input type="button" value="Is it taken?" id="username-search"> <span id="username-search-results"></span>
/^^-_[^-_]$/gi;
您正在使用g(全局)RegExp。在JavaScript中,全局正则表达式处于状态:您第一次调用它们(使用exec,test等等),您将在给定字符串中获得第一个匹配项。再次调用它们,您将得到下一个匹配项,依此类推,直到没有匹配项,它将重置为下一个字符串的开头。您也可以写regex.lastIndex= 0以重置此状态。
g
RegExp
exec
test
regex.lastIndex= 0
(这当然是绝对糟糕的设计,保证会造成混乱并引起奇怪的错误。欢迎使用JavaScript!)
可以省略g从你的RegExp,因为你只测试了一场比赛。
另外,我认为您不需要[^-_]正面和背面。那将允许在每个末端的 任何 字符,即。*plop!将是有效的。您可能正在考虑超前/向后断言,但是它们在JavaScript中不可用。(嗯,应该是超前的,但是在IE中是坏的。)建议:
[^-_]
*plop!
/^[a-z0-9][a-z0-9_-]{2,18}[a-z0-9]$/i