【发布时间】：2021-08-28 01:28:34
【问题描述】：
我正在处理表单验证，这里表单验证不起作用，这可能是问题所在。谁能推荐我。
class Registrationform {
constructor() {
this.initializeElements();
}
initializeElements () {
this.demoRegisterWrap = $('.demoRegister-wrap');
this.registrationForm = $('.registration-form');
this.username = '#username';
this.useremail= '#useremail';
this.userpassword = '#userpassword';
this.formValidation();
}
formValidation() {
let submitBtn = this.demoRegisterWrap.find('.submitBtn');
submitBtn.on('click', e => {
alert('test');
e.preventDefault();
alert('test');
var text = "";
if (UserName(this.username)) {
}
if (UserEmail(this.useremail)) {
}
if (UserPassword(this.userpassword)) {
}
return false;
});
/*Name input validation*/
function UserName(username) {
var message = document.getElementsByClassName("error-message");
var letters = /^[A-Za-z]+$/;
if ( username =="" || username.match(letters)) {
text="";
message[0].innerHTML = text;
return true;
}
else {
text="Name should contain only letters";
message[0].innerHTML = text;
return false;
}
}
/*email address input validation*/
function UserEmail(useremail) {
var message = document.getElementsByClassName("error-message");
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var atpos = useremail.indexOf("@");
var dotpos = useremail.lastIndexOf(".");
if ( useremail =="" || useremail.match(mailformat) || atpos > 1 && ( dotpos - atpos > 2 )) {
text="";
message[1].innerHTML = text;
return true;
}
else {
text="Wrong email format";
message[1].innerHTML = text;
return false;
}
}
/*validate password*/
function UserPassword(userpassword) {
var message = document.getElementsByClassName("error-message");
var illegalChars = /[\W_]/;
if (illegalChars.test(userpassword)) {
text="Password contains illegal characters";
message[2].innerHTML = text;
return false;
}
else if ( (userpassword.search(/[0-9]+/)==-1) ) {
text="Password should contain at least one number";
message[2].innerHTML = text;
return false;
}
else {
text="";
message[2].innerHTML = text;
return true;
}
}
}
}
new Registrationform();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demoRegister-wrap">
<form class="registration-form" novalidate>
<fieldset>
<br/>
<input type="text" id="username" name="name" placeholder="Name" />
<p class="error-message"></p>
<input type="text" id="useremail" placeholder="Email" />
<p class="error-message"></p>
<input type="password" id="userpassword" pattern=".{8,}" title="8 characters minimum" />
<p class="error-message"></p>
<label for="submit"></label>
<input class="submitBtn" type="submit" value="submit" name="submit" />
</fieldset>
</form>
</div>【问题讨论】：
-
你应该使用
onsubmit事件form。 -
@Pawan Bishoni onsubmit 如果我在表单中使用了
onClick='func();'，则会显示其他一些错误。 -
@ray hatfield 脚本加载正常，如果我在 onclick 之外添加警报，它即将到来
-
您的输入/按钮有 2 个类声明。
-
@Husna 按照 Pawan 的建议，听起来很奇怪，提交按钮的默认操作不是提交表单，
e.preventDefault()不起作用，但它会在表单提交处理程序中.
标签： javascript html jquery