单击登录按钮时，我在验证此代码时遇到问题。
**我的 html 代码 **
<form action="abc.php"
method="post"
onsubmit="return jcheck();">
<div id="id_box">
<input type="text"
name="email"
id="id_text" placeholder="E-mail" >
<div id="pass_box">
<input type="password"
name="password" id="pass_text" placeholder="Password">
<div id="submit_box">
<input
type="submit"
id="sub_box"
onClick="click_event()"
value="Login">
我的JavaScript代码：
function click_event(){
jcheck();
function validate_ID(){
var email = document.getElementById('id_text');
var filter = /^[a-z0-9]('.?[a-z0-9]){1,}@threadsol'.com$/;
var filter1 = /^[a-z0-9]('.?[a-z0-9]){1,}@intellocut'.com$/;
var flag=0;
if (filter.test(email.value)==false
&& filter1.test(email.value)==false ) {
$('#warn_pass').html("Enter Valid Email or Password");
$("#e_asterics").html("");
return false;
} else
return true;
}
function validate_Pass() {
var pass =document.getElementById('pass_text');
var filter = /^(?=.*'d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*'s). 4,}$/;
if (filter.test(pass.value)==false ) {
$('#warn_pass').html("Enter Valid Email or Password");
$("#p_asterics").html("");
return false;
} else
return true;
}
function jcheck();
$("#e_asterics").html("");$("#p_asterics").html("");
$('#warn_text').html("");$('#warn_pass').html("");
var name = jQuery.trim($("#id_text").val());var pas = jQuery.trim($("#pass_text").val());
if ((name.length == 0) && (pas.length == 0)) {
$('#warn_text').html("*Indicates required field");
$('#warn_pass').html("* Indicates required field");
$("#e_asterics").html("*");$("#p_asterics").html("*"); }
else if (name.length == 0)) {
$("#e_asterics").html("*");
$("#p_asterics").html("");
$('#warn_pass').html("Email Id Required");
} else if ((pas.length == 0)) {
if(name.length != 0)
{
validate_ID();
} else {
$("#e_asterics").html("*");
$('#warn_text').html("Enter Email Id");
}
$("#p_asterics").html("*");
$('#warn_pass').html("Password Required");
}
}
return false;
}
对于初学者，您应该始终缩进代码，以便更容易发现错误。我帮你做了一些缩进，代码中有很多问题。你做错的一件事是你需要关闭函数，否则分支和html标签。
所有 HTML 标记都应以结束标记结尾或立即关闭。示例<div></div>或<div />如果不这样做，浏览器可能会在不同的浏览器上以不同的方式呈现您的页面。您在输入标签div 和表单标签上错过了这一点。也许您应该检查整个html文档以获取更多这些错误。
JavaScript 中的函数应该始终如下所示
function name(parameters, ...) {
}
或者像这样
var name = function(parameters, ...) {
}
名称和参数可能会有所不同，但通常函数应如下所示。
if 语句 else 分支和 else if 分支都应该为其代码添加括号。
if () {
//code
} else if () {
//code
} else {
//code
}
如果你不关闭开始并关闭其他括号，javascript 将以非常奇怪和意想不到的方式运行。事实上，我认为您的代码甚至可能无法编译。
如果您使用的是 chrome，请按 Ctrl + Shift + J 并查看控制台选项卡。您应该在那里看到一些错误消息。当您单击提交按钮时。
此外，在提交按钮上使用onClick可能很危险，因为我认为这不会阻止提交。实现所请求功能的更好方法可能是使用按钮类型输入并使用onClick或使用窗体上的onSubmit函数。您目前正在同时使用两者，并且实际上无法判断click_event或jcheck是否会首先运行。也许您应该调试并查看函数调用发生的顺序。您可以使用 chrome 进行调试，方法是按 CTRL + Shift + J 并在"源"选项卡中设置调试点。
您还有一个小的风格错误，您将正则表达式test()的结果与false进行比较。test 的返回值已经是布尔值，不需要比较。
这是对HTML应该如何外观的估计。很难说它是否正确，因为我没有比您的代码更多的信息可以继续，而且它有很多问题。
<form action="abc.php" method="post" onsubmit="return jcheck();">
<div id="id_box">
<input type="text" name="email" id="id_text" placeholder="E-mail" />
</div>
<div id="pass_box">
<input type="password" name="password" id="pass_text" placeholder="Password">
</div>
<div id="submit_box">
<input
type="submit"
id="sub_box"
value="Login" />
</div>
</form>
这是js可能的样子。这里缺少括号使得很难判断函数应该在哪里结束，所以我不得不猜测很多。
/* I find it hard to belive you wanted to encapsule your functions inside the
click_event function so I took the liberty of placing all
functions in the glonbal scope as this is probably what you inteneded.
I removed the click_event handler as it only does the same thing as the onSubmit.
*/
function validate_ID() {
var email = document.getElementById('id_text');
var filter = /^[a-z0-9]('.?[a-z0-9]){1,}@threadsol'.com$/;
var filter1 = /^[a-z0-9]('.?[a-z0-9]){1,}@intellocut'.com$/;
var flag=0;
// Or feels better here as there is no way the email ends with bot @intellocut and @threadsol
// It also feels strange that these are the invalid adresses maby you messed up here and should change
// the contents of the else and the if branch.
if (filter.test(email.value) || filter1.test(email.value)) {
$('#warn_pass').html("Enter Valid Email or Password");
$("#e_asterics").html("");
return false;
} else {
return true;
}
}
// This funcion is not used Im guessing you should have used it in
function validate_Pass() {
var pass =document.getElementById('pass_text');
/* The filter below could cause problems for users in deciding password unless
you tell them some where what the rules are.
It was missing a { bracket before the 4 at the end that I added make sure
it is right now. If you are going to use the code.
*/
var filter = /^(?=.*'d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*'s). {4,}$/;
if (filter.test(pass.value)) {
$('#warn_pass').html("Enter Valid Email or Password");
$("#p_asterics").html("");
return false;
} else {
return true;
}
}
/* There are betterways to deal with multiple validation than chaining them like
this but Im guessing this will work. Im guessing that if you want to use the
password validation you should call it some where in this function.
like so 'validate_Pass()'
*/
function jcheck() {
$("#e_asterics").html("");$("#p_asterics").html("");
$('#warn_text').html("");$('#warn_pass').html("");
var name = jQuery.trim($("#id_text").val());var pas = jQuery.trim($("#pass_text").val());
if ((name.length === 0) && (pas.length === 0)) {
$('#warn_text').html("*Indicates required field");
$('#warn_pass').html("* Indicates required field");
$("#e_asterics").html("*");
$("#p_asterics").html("*"); }
else if (name.length === 0) {
$("#e_asterics").html("*");
$("#p_asterics").html("");
$('#warn_pass').html("Email Id Required");
} else if (pas.length === 0) {
if(name.length !== 0) {
validate_ID();
} else {
$("#e_asterics").html("*");
$('#warn_text').html("Enter Email Id");
}
}
}