带有密码确认的Bootstrap 4验证（注册表）
问题描述 投票：0回答：2
以一种简单的形式，每个字段都有3个带有正则表达式模式的输入字段。其中两个（“密码”和“确认密码”）必须匹配。如果不是，则显示消息“不匹配”。如果这样做，则显示“有效”。
在以下情况下，如何（通过JavaScript）强制显示Bootstrap 4验证的红色边框和'X'图标：
在“密码”字段中输入“ aa”（它与正则表达式匹配，因此为有效的绿色边框和V图标）。在“确认密码”字段中输入“ aa”（它与正则表达式匹配，因此为有效的绿色边框和V图标）。现在，我在“确认密码”中添加了另一个字符，它立即显示“ Not Matching”，但是根据正则表达式，它没问题-它仍然是带有“ V”图标的绿色。
我需要在出现这种情况时强行使用红色边框和'X'图标。
我的代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red;
}
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
Field1<input type="text" class="form-control" pattern="^[a-z]{2,4}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Confirm Password<input type="text" id="cPwdId" class="form-control" pattern="^[a-z]{2,4}$" required>
<div id="cPwdValid" class="valid-feedback">Valid</div>
<div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
// Check if passwords match
$('#pwdId, #cPwdId').on('keyup', function () {
if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val()) {
$("#submitBtn").attr("disabled",false);
$('#cPwdValid').show();
$('#cPwdInvalid').hide();
$('#cPwdValid').html('Valid').css('color', 'green');
} else {
$("#submitBtn").attr("disabled",true);
$('#cPwdValid').hide();
$('#cPwdInvalid').show();
$('#cPwdInvalid').html('Not Matching').css('color', 'red');
}
});
let currForm1 = document.getElementById('myForm1');
// Validate on submit:
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
currForm1.classList.add('was-validated');
}, false);
// Validate on input:
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid')
input.classList.add('is-valid');
} else {
input.classList.remove('is-valid')
input.classList.add('is-invalid');
}
var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
$("#submitBtn").attr("disabled", !is_valid);
});
});
});
</script>
谢谢！
2个回答
0
投票
投票
您是否无法根据需要在两个密码输入上切换is-invalid类？
$('#pwdId, #cPwdId').on('keyup', function () {
if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val()) {
$("#submitBtn").attr("disabled",false);
$('#cPwdValid').show();
$('#cPwdInvalid').hide();
$('#cPwdValid').html('Valid').css('color', 'green');
$('.pwds').removeClass('is-invalid')
} else {
$("#submitBtn").attr("disabled",true);
$('#cPwdValid').hide();
$('#cPwdInvalid').show();
$('#cPwdInvalid').html('Not Matching').css('color', 'red');
$('.pwds').addClass('is-invalid')
}
});
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<div class="form-group">
Field1<input type="text" class="form-control" pattern="^[a-z]{2,4}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Password<input type="text" id="pwdId" class="form-control pwds" pattern="^[a-z]{2,4}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
Confirm Password<input type="text" id="cPwdId" class="form-control pwds" pattern="^[a-z]{2,4}$" required>
<div id="cPwdValid" class="valid-feedback">Valid</div>
<div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 4 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled>Submit</button>
</div>
</form>
0
投票
投票
在@Zim的帮助下，我开始并设法解决它。
以下是简单注册表格的代码，其中包含两个密码的比较。
注1：我已经对其进行了广泛的测试，但是它可能存在bug（如果找到一个，请告知我们）。
注2：关于Javascript和JQuery，我仅在两个星期前出生，所以我想我的解决方案并不尽如人意（再次，让我们所有人知道您是否可以改进它）。
这里是完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Validation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
input[type="submit"]:disabled {
background-color: red;
}
</style>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="page2.php" id="myForm1" class="needs-validation" novalidate>
<h1 class="text-center">Registration</h1>
<div class="form-group">
First Name<input name="myInput" id="fisrtNameId" type="text" class="form-control myBogusClass" pattern="^[a-z]{2,15}$" required autofocus>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 15 long)</div>
</div>
<div class="form-group">
Last Name<input name="myInput" id="lastNameId" type="text" class="form-control myBogusClass" pattern="^[a-z]{2,15}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 15 long)</div>
</div>
<div class="form-group">
Password<input type="text" id="pwdId" class="form-control" pattern="^[a-z]{2,6}$" required>
<div class="valid-feedback">Valid</div>
<div class="invalid-feedback">a to z only (2 to 6 long)</div>
</div>
<div class="form-group">
Confirm Password<input type="text" id="cPwdId" class="form-control myCpwdClass" pattern="^[a-z]{2,6}$" required>
<div id="cPwdValid" class="valid-feedback">Passwords Match</div>
<div id="cPwdInvalid" class="invalid-feedback">a to z only (2 to 6 long)</div>
</div>
<div class="form-group">
<button id="submitBtn" type="submit" class="btn btn-primary submit-button" disabled="">Register</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
let currForm1 = document.getElementById('myForm1');
// ------------ Check passwords similarity: -------------
$('#pwdId, #cPwdId').on('keyup', function () {
if ($('#pwdId').val() != '' && $('#cPwdId').val() != '' && $('#pwdId').val() == $('#cPwdId').val() ) {
$('#cPwdValid').show();
$('#cPwdInvalid').hide();
$('#cPwdInvalid').html('Passwords Match').css('color', 'green');
$('.myCpwdClass').addClass('is-valid');
$('.myCpwdClass').removeClass('is-invalid');
var inpObj = document.getElementsByName("myInput");
$("#submitBtn").attr("disabled",false);
for (i=0;i<inpObj.length;i++){
if (inpObj[i] !== null && inpObj[i].value === ""){
document.getElementById(inpObj[i].id).classList.add('is-invalid');
$("#submitBtn").attr("disabled",true);
}
}
} else {
$('#cPwdValid').hide();
$('#cPwdInvalid').show();
$('#cPwdInvalid').html('Not Matching').css('color', 'red');
$('.myCpwdClass').removeClass('is-valid');
$('.myCpwdClass').addClass('is-invalid');
$("#submitBtn").attr("disabled",true);
}
});
// ----------------- Validate on submit -----------------
currForm1.addEventListener('submit', function(event) {
if (currForm1.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
else {
$("#submitBtn").attr("disabled",false);
currForm1.classList.add('was-validated');
}
}, false);
// ----------------- Validate on input -----------------
currForm1.querySelectorAll('.form-control').forEach(input => {
input.addEventListener(('input'), () => {
if (input.checkValidity()) {
input.classList.remove('is-invalid');
input.classList.add('is-valid');
} else {
input.classList.remove('is-valid');
input.classList.add('is-invalid');
}
var is_valid = $('.form-control').length === $('.form-control.is-valid').length;
$("#submitBtn").attr("disabled", !is_valid);
});
});
// ------------------------------------------------------
});
</script>
</body>
</html>
最新问题
- 如何将数据添加到转换为txt的png中，并且png仍然可以打开？
- 在 springboot 中修改实体时出错：行已被另一个事务更新或删除（或未保存值映射不正确）：
- 如何使用 add_argument 设置用户配置文件？
- 在使用 GraphQL 的 Shopify 中，我应该如何在单个查询中查询元对象和子查询元对象？
- 如何删除 uberMenu 插件上的“菜单”标签？
- 由于 Node-sass，带有 github 操作的 Firebase 网站构建失败？
- Entity Framework Core 中的列名称无效
- Chrome驱动程序版本（125）找不到chromedriver.exe
- 为什么使用 http 获取 POST 到远程数据库可以工作，但不能使用 https 协议？
- 未找到任务“默认”。使用 --force 继续 grunt 错误
- vue 加载消息两次
- 当我尝试输入括号时（或者当光标位于前面或位于括号上时，VIM 会卡住
- 无法在Python中使用pyodbc建立连接
- Grails i18n：设置 Accept-Language 标头
- 使用 Sphinx 记录包 __init__ 导入
- RadComboBox DropDownList 已从其位置分离
- 有 os.system() 或 subprocess.call() 没有返回或错误
- 由于useEffect无限循环而无法获取和更新数据
- 执行 SSL 握手时出现 NPGSQL 异常
- 将现有表中的数据插入新表 - clickhouse
© www.soinside.com 2019 - 2024. All rights reserved.