如何在 javascript 中单击登录按钮时通过发布请求验证登录
How to validate login trough post request upon clicking the login button in javascript?
单击登录按钮时,我在验证此代码时遇到问题。
**我的 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");
}
}
}
- BrowserId登录请求在文档加载时被调用
- 如果需要登录,Angularjs$http拦截器会暂停异步请求
- 我的登录请求中缺少什么
- Laravel:在 ajax 请求的会话过期后重定向到登录
- ajax请求在Joomla 3.3中登录
- 使用POST请求登录时读取服务器发送的cookie
- CORS允许一些GET请求,但不允许Facebook登录请求
- PassportJS - GET请求中的登录凭据
- 使用 Angular JS 登录,$http请求不起作用
- 使用嵌入式 JS(CORS+AJAX 请求)跨域安全登录
- 如何在 javascript 中单击登录按钮时通过发布请求验证登录
- Ruby on rails:如何从登录弹出窗口向rails控制器发送AJAX请求以及用户给定的凭据
- 在客户端的请求中使用以 JSON 格式传递的登录信息
- 无法使用Python和请求模块从.aspx登录页获得所需的响应
- FB.登录时没有请求权限
- 使用get/post请求登录帐户
- 使用Ajax请求登录后的ZfcUser重定向
- jQuery AJAX请求PHP登录不正常
- 使用react和redux登录api请求
- 使用身份验证登录 frisby 请求标头中的参数