我目前正在使用正则表达式为用户验证表单制作一个网站。我正在尝试添加一个按钮，它仅在所有字段都被正确输入(因此不会出现错误)时才会出现，以便用户在完成后单击。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
// validation script here
const inputs = document.querySelectorAll('input');
const patterns = {
telephone:/^\d{10}$/, //10 digits
username:/^[a-z\d]{5,12}$/i, //5-12 words
password:/^[\w@-]{8,20}$/, //8-20 words
name:/^[A-Za-z-,]{1,20}$/, //1-20 words
email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
};
//validation function
function validate(field,regex){
if(regex.test(field.value)){
field.className = 'valid';
}else{
field.className = 'invalid';
}
}
inputs.forEach((input) => {
input.addEventListener('keyup',(e) => {
validate(e.target,patterns[e.target.attributes.name.value])
});
});
});
</script>
</head>
<body>
<div class="container-fluid colorOverlay">
<div class="row">
<article>
<h1 class="headerText">Join Us!</h1>
</article>
<video id="video-background" autoplay loop muted>
<source src="goods.mp4" data-src="goods.mp4" type="video/mp4">
</video>
</div>
</div>
<form>
<input type="text" name="name" placeholder="name">
<p>Name must contain only letters and be 1-20 characters</p>
<input type="text" name="username" placeholder="username">
<p>Username must be and contain 5 - 12 characters</p>
<input type="text" name="email" placeholder="email">
<p>Email must be a valid address, e.g. me@mydomain.com</p>
<input type="password" name="password" placeholder="password">
<p>Password must alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters</p>
<input type="text" name="telephone" placeholder="telephone">
<p>Telephone must be a valid telephone number (10 digits)</p>
<!-- Button -->
<input type="submit" name="register" value="Register" class="btn">
</form>
</body>
</html>
我对 javascript 还是个新手，这只是我目前正在做的个人元素之一。如果您想知道，video 标签只是用于背景。
最佳答案
完整代码如下:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container-fluid colorOverlay">
<div class="row">
<article>
<h1 class="headerText">Join Us!</h1>
</article>
<video id="video-background" autoplay loop muted>
<source src="goods.mp4" data-src="goods.mp4" type="video/mp4">
</video>
</div>
</div>
<form>
<input class="validate" type="text" name="name" placeholder="name">
<p>Name must contain only letters and be 1-20 characters</p>
<input class="validate" type="text" name="username" placeholder="username">
<p>Username must be and contain 5 - 12 characters</p>
<input class="validate" type="text" name="email" placeholder="email">
<p>Email must be a valid address, e.g. me@mydomain.com</p>
<input class="validate" type="password" name="password" placeholder="password">
<p>Password must alphanumeric (@, _ and - are also allowed) and be 8 - 20 characters</p>
<input class="validate" type="text" name="telephone" placeholder="telephone">
<p>Telephone must be a valid telephone number (10 digits)</p>
<!-- Button -->
<input type="submit" name="register" value="Register" id="submit" class="btn">
</form>
<script type = "text/javascript" language = "javascript">
var fields = document.getElementsByClassName("validate");
var submit_button = document.getElementById("submit");
const rules = {
telephone:/^\d{10}$/, //10 digits
username:/^[a-z\d]{5,12}$/i, //5-12 words
password:/^[\w@-]{8,20}$/, //8-20 words
name:/^[A-Za-z-,]{1,20}$/, //1-20 words
email:/^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/
};
var field_status = Array(fields.length);
function validate(field, field_id){
field_status[field_id] = field.value.match(rules[field.name]);
field.className = field.className.replace(/ (in|)valid/, "");
if (!field_status[field_id]){
field.className += " invalid";
} else {
field.className += " valid";
}
toggleSubmitButton();
}
function toggleSubmitButton(){
var status = 0;
for (var x = 0; x < field_status.length; x++){
if (!field_status[x]){
status = 0;
break;
} else {
status = field_status[x];
}
}
var display = "none";
if (status){
display = "block";
}
submit_button.style.display = display;
}
function addKeyUpEvent(field, field_id){
field.addEventListener("keyup", function(event){
validate(this, field_id);
});
}
for (var x = 0; x < fields.length; x++){
addKeyUpEvent(fields[x], x);
}
toggleSubmitButton();
</script>
</body>
</html>
关于javascript - 注册按钮 HTML CSS JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53687406/