我正在创建一个表单,要求提供电子邮件和密码并进行验证。如果有任何错误,它会在同一行弹出。下面是我的 javascript 代码。当我填写表格并点击提交时,这些值会被重置。此外,我在控制台中没有看到任何内容。我尝试使用随机代码 console.log('Hanee') 来测试我的代码,但控制台选项卡中没有生成任何内容。谁能告诉我这里出了什么问题吗?
此外,这是我的登录表单的链接:http://www2.cs.uregina.ca/~hsb833/215a/login.html
document.getElementById("login-form").addEventListener("submit",validateLogin,false);
function validateLogin(event){
var elements = event.currentTarget;
var emailValue = elements[0].value;
var passValue = elements[1].value;
checkEmail(emailValue);
checkPass(passValue);
}
function checkEmail(emailValue){
var regex_email = /^[/w]+@[a-zA-Z]+?\.[a-zA-Z]{2,3}$/;
var index = emailValue.search(regex_email);
var errorEmail = document.getElementById("errorEmail");
var valid = true;
console.log('Hanee');
if(index != 0){
errorEmail.style.display = 'inline';
}
}
function checkPass(passValue){
var password = document.getElementById("password");
var regex_pass = /[\w]+\S/;
var index = passValue.search(regex_pass);
if(passValue.length < 6){
console.log('password is invalid. Minimum length is 6');
errorPassLen.style.display = 'inline';
}
if(index != 0){
console.log('password is invalid. Please make sure there is no spaces in between');
errorPassFormat.style.display = 'inline';
}
}
form
默认提交后刷新。为了防止这种情况,请在您的 event.preventDefault();
中使用
validateLogin
这是带有用户名和密码的表单示例,也许它会适合您,您可以根据您的需要对其进行自定义
async function tebeFxhr() {
let logfil = 1;
let sotebe= false;
let tes =(logt) => {
return /^[a-zA-Z0-9]+$/ui.test(logt);
}
tes(gtebe)==true ? logfil++ : alert('Login cannot contain characters or spaces')
let textrf =(rutext) => {
return /[а-я]/i.test(rutext);
}
textrf(stebe)==true ? alert('The password cannot contain Cyrillic characters') : logfil++;
stebe.length < 8 ? alert('Password is very short') : logfil++;
stebe===ftebe ? logfil++ : alert('Enter the password 2 times so that they match')
if (logfil === 5){
const data = {data_0:gtebe, data_1:stebe, data_2:ftebe};
const response = await fetch("/form", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then((response) => {
return response.text();
})
.then((sotebe) => {
console.log(sotebe)
if(sotebe==='error-1'){
console.log('error-1')
}
else{
sotebe =='' ? location.replace("../") : alert(sotebe)
}
});
}
}
当触发
submit
事件时,所有值都会发送到服务器并重置。如果您想防止这种情况发生,请在事件处理函数 event.preventDefault();
中使用 validateLogin(event)
。然后,这些值将不会被重置!
如果您希望提交后的值为空,请尝试以下操作。
elements.forEach(e => e.value = '');
我需要帮助申请 iccr 奖学金,当我按提交密码增加本身,然后它写了错误的用户名和密码..可能会导致什么