代码段
e.preventDefault();
e.stopPropagation();
var regExp = new RegExp(e.getAttribute('regexp'));
console.log($('form').serializeArray());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用Bootstrap制作注册表单</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
form .row {
justify-content: center;
}
form label {
text-align: end;
align-self: center;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>注册</h1>
</div>
<form action="#" novalidate class="container">
<div class="row form-group">
<label for="nickname" class="col-2">昵称：</label>
<input regexp='\S' name='nickname' type="text" placeholder="请输入昵称" class="col-7 form-control">
<div class="offset-2 col-7 invalid-feedback">昵称不能为空</div>
</div>
<div class="row form-group">
<label for="password" class="password col-2">密码：</label>
<input regexp='^[a-zA-Z0-9]{8,20}$' id="password" name='password' type="password" class="form-control col-7"
placeholder="请输入密码">
<div class="offset-2 col-7 invalid-feedback">密码格式错误</div>
<small class="form-text text-muted offset-2 col-7">
密码长度应在8~20位之间，为字母或数字
</small>
</div>
<div class="row form-group">
<label for="re-password" class="col-2">确认密码：</label>
<input type="password" name="re-password" id="re-password" placeholder="请再次输入密码" class="col-7 form-control">
<div class="offset-2 col-7 invalid-feedback">两次输入密码不一致</div>
</div>
<div class="row form-group">
<label for="email" class="col-2">邮箱：</label>
<input regexp="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" name='email' type="email" class="col-7 form-control" placeholder="请输入邮箱地址">
<div class="offset-2 col-7 invalid-feedback">请输入正确的邮箱地址</div>
</div>
<div class="row form-group">
<label for="sex" class="col-2">性别：</label>
<div class="col-7 ">
<div class="custom-control custom-radio custom-control-inline">
<input checked type="radio" id="man" name="sex" class="custom-control-input" value='man'>
<label for="man" class="custom-control-label">
男生
</label>
</div>
<div class="custom-radio pl-3 custom-control-inline">
<input type="radio" name="sex" id="women" class="custom-control-input" value='women'>
<label for="women" class="custom-control-label">女生</label>
</div>
</div>
</div>
<div class="row form-group">
<label for="hobby" class="col-2">爱好：</label>
<div class="col-7">
<div class="custom-control custom-checkbox custom-control-inline">
<input name='hobby' type="checkbox" class="custom-control-input" name="hobby" id="read"
value='read'>
<label for="read" class="custom-control-label">阅读</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input name='hobby' type="checkbox" class="custom-control-input" name="hobby" id="run" value="run">
<label for="run" class="custom-control-label">跑步</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input name='hobby' type="checkbox" name="hobby" id="swim" class="custom-control-input"
value="swim">
<label for="swim" class="custom-control-label">游泳</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input name='hobby' type="checkbox" name="hobby" id="draw" class="custom-control-input"
value="draw">
<label for="draw" class="custom-control-label">绘画</label>
</div>
</div>
</div>
<div class="row form-group">
<label class="col-2">消息推送：</label>
<div class="col-7">
<div class="custom-switch">
<input name='is_push' type="checkbox" name="push" id="push" class="custom-control-input">
<label for="push" class="custom-control-label">推送消息至邮箱</label>
</div>
</div>
</div>
<div class="row form-group">
<label for="phone" class="col-2">手机号：</label>
<input regexp="^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$" name="phone" type="tel" class="form-control col-7" placeholder="请输入手机号">
<div class="offset-2 col-7 invalid-feedback">请输入正确的手机号码</div>
</div>
<div class="form-group text-center">
<button class="btn btn-primary">点击注册</button>
</div>
</form>
</body>
<script>
(function () {
console.log($('#re-password'))
$('form').on('submit', (e) => {
e.preventDefault();
e.stopPropagation();
if ($('#re-password').val() != $('#password').val()) {
$('#re-password').addClass('is-invalid');
console.log($('#re-password').val())
}else{
$('#re-password').removeClass('is-invalid');
}
$('form').find('input[regexp]').each((i, e) => {
var value = e.value;
var regExp = new RegExp(e.getAttribute('regexp'));
if (!regExp.test(value)) {
e.classList.add('is-invalid');
} else {
e.classList.remove('is-invalid');
}
})
console.log($('form').serializeArray());
})
})();
</script>
</html>
6449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
