短視訊帶貨原始碼，實現註冊和對註冊賬號的驗證
阿新 • • 發佈：2022-04-11
短視訊帶貨原始碼，實現註冊和對註冊賬號的驗證
1、html+css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.form{
border-radius: 50px;
background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
}
a:hover{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 180px;">
<form id="addUserForm" class="col-sm-offset-4 col-sm-4 col-sm-offset-4 form form-horizontal" action="#" method="post">
<h3 class="text-center">使用者註冊</h3>
<!--把標籤和控制元件放在一個from-group的div中-->
<div class="form-group">
<label for="username" class="col-sm-4 control-label">賬<span> </span>號</label>
<div class="col-sm-7">
<input class="form-control" type="text" name="userName" id="username" placeholder="由2-12個字元組成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">密<span> </span>碼</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword" id="psw" placeholder="由6-18個字元組成" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="psw" class="col-sm-4 control-label">確認密碼</label>
<div class="col-sm-7">
<input class="form-control" type="password" name="userPassword2" id="psw" placeholder="再次確認密碼" />
</div>
<div class="col-sm-1">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">郵<span> </span>箱</label>
<div class="col-sm-7">
<input name="userEmail" class="form-control" type="email" name="userEmail" id="email" placeholder="例如:[email protected]">
</div>
<div class="col-sm-1">
</div>
</div>
<button type="submit" class="btn btn-success col-sm-12">註冊</button>
<div class="text-right" style="margin-bottom: 20px;">
<a href="login.html">已有賬號？立即登入</a>
</div>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>
<script src="js/form.js"></script>
</body>
</html>
背景圖片的來源 https://webgradients.com 這個網站力推，太美了!
2、js部分程式碼（記得要把bootstrap的圖示字型檔案複製到專案的fonts檔案中哦）
//登錄檔單驗證
$(function () {
//表單的id
$('#addUserForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
message: '使用者名稱驗證失敗',
validators: {
notEmpty: {
message: '使用者名稱不能為空'
},stringLength: {
min: 2,
max: 12,
message: '2-12位字母或數字'
}
}
},
userPassword: {
validators: {
notEmpty: {
message: '密碼不能為空'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或數字'
},identical: {
field: 'userPassword2',
message: '請保持密碼一致'
}
}
},
userPassword2: {
validators: {
notEmpty: {
message: '請再次輸入密碼'
},stringLength: {
min: 6,
max: 18,
message: '6-18位字母或數字'
},identical: {
field: 'userPassword',
message: '請保持密碼一致'
}
}
},
userEmail: {
validators: {
notEmpty: {
message: '郵箱不能為空'
},
emailAddress: {
message: '非法郵箱格式'
}
}
}
}
});
});
以上就是 短視訊帶貨原始碼，實現註冊和對註冊賬號的驗證，更多內容歡迎關注之後的文章