<body>
<h2 class="title col-sm-6 offset-sm-3 col-12">注册</h1>
<form id="myForm" class="col-sm-6 offset-sm-3 col-12">
<div class="form-group form-row">
<label class="col-form-label col-2">姓名</label>
<div class="col-10">
<input class="form-control col-10" name="name" type="text" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2">密码</label>
<div class="col-10">
<input class="form-control col-10" name="password" type="password" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2">电话</label>
<div class="col-10">
<input class="form-control col-10" name="cellphone" type="text" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-2">地址</label>
<div class="col-10">
<input class="form-control col-10" name="address" type="text" />
</div>
</div>
<div id="result" class="alert alert-danger">
</div>
<div class="form-group form-row operate">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</form>
</body>#result{
display: none;
}
.title{
margin-top:20px;
margin-bottom:50px;
}
.operate button{
margin: 0 auto;
}var form = document.querySelector('#myForm');
var result = document.querySelector('#result');
form.addEventListener('submit', function(e){
if(!document.querySelector('[name=password]').value){
result.style.display = 'block';
result.innerHTML = '密码为空';
}else{
result.style.display = 'none';
}
e.preventDefault();
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.