短视频带货源码，实现注册和对注册账号的验证

1、html+css部分

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8" /><br><title>register</title><br><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><br><style type="text/css"><br>.form{<br>border-radius: 50px;<br>background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);<br>}<br>a:hover{<br>text-decoration: none;<br>color: red;<br>}<br></style><br></head><br><body><br><div class="container" style="margin-top: 180px;"><br><form id="addUserForm" class="col-sm-offset-4 col-sm-4 col-sm-offset-4 form form-horizontal" action="#" method="post"><br><h3 class="text-center">用户注册</h3><br><!--把标签和控件放在一个from-group的div中--><br><div class="form-group"><br><label for="username" class="col-sm-4 control-label">账<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>号</label><br><div class="col-sm-7"><br><input class="form-control" type="text" name="userName" id="username" placeholder="由2-12个字符组成" /><br></div><br><div class="col-sm-1"><br></div><br></div><br><div class="form-group"><br><label for="psw" class="col-sm-4 control-label">密<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>码</label><br><div class="col-sm-7"><br><input class="form-control" type="password" name="userPassword" id="psw" placeholder="由6-18个字符组成" /><br></div><br><div class="col-sm-1"><br></div><br></div><br><div class="form-group"><br><label for="psw" class="col-sm-4 control-label">确认密码</label><br><div class="col-sm-7"><br><input class="form-control" type="password" name="userPassword2" id="psw" placeholder="再次确认密码" /><br></div><br><div class="col-sm-1"><br></div><br></div><br><div class="form-group"><br>                <label for="email" class="col-sm-4 control-label">邮<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>箱</label><br>                <div class="col-sm-7"><br>                <input name="userEmail" class="form-control" type="email" name="userEmail" id="email" placeholder="例如:123@123.com"><br>                </div><br>                <div class="col-sm-1"><br></div><br>            </div><br><button type="submit" class="btn btn-success col-sm-12">注册</button><br>            <div class="text-right" style="margin-bottom: 20px;"><br>                <a href="login.html">已有账号？立即登录</a><br>            </div><br></form><br></div><br><script src="js/jquery.min.js"></script><br><script src="js/bootstrap.min.js"></script><br><script src="js/bootstrapValidator.min.js"></script><br><script src="js/form.js"></script><br></body><br></html>

背景图片的来源 https://webgradients.com 这个网站力推，太美了!

2、js部分代码（记得要把bootstrap的图标字体文件复制到项目的fonts文件中哦）

<br>//注册表单验证<br>$(function () {<br>//表单的id<br>    $('#addUserForm').bootstrapValidator({<br>　　　　　　　　message: 'This value is not valid',<br>            　feedbackIcons: {<br>                　　　　　　　　valid: 'glyphicon glyphicon-ok',<br>                　　　　　　　　invalid: 'glyphicon glyphicon-remove',<br>                　　　　　　　　validating: 'glyphicon glyphicon-refresh'<br>            　　　　　　　　   },<br>            fields: {<br>                userName: {<br>                    message: '用户名验证失败',<br>                    validators: {<br>                        notEmpty: {<br>                            message: '用户名不能为空'<br>                        },stringLength: {<br>                        min: 2,<br>                        max: 12,<br>                        message: '2-12位字母或数字'<br>                    }<br>                    }<br>                },<br>                userPassword: {<br>                validators: {<br>                    notEmpty: {<br>                        message: '密码不能为空'<br>                    },stringLength: {<br>                        min: 6,<br>                        max: 18,<br>                        message: '6-18位字母或数字'<br>                    },identical: {<br>                        field: 'userPassword2',<br>                        message: '请保持密码一致'<br>                    }<br>                }<br>                },<br>                userPassword2: {<br>                validators: {<br>                    notEmpty: {<br>                        message: '请再次输入密码'<br>                    },stringLength: {<br>                        min: 6,<br>                        max: 18,<br>                        message: '6-18位字母或数字'<br>                    },identical: {<br>                        field: 'userPassword',<br>                        message: '请保持密码一致'<br>                    }<br>                }<br>                },<br>                userEmail: {<br>                    validators: {<br>                    notEmpty: {<br>                        message: '邮箱不能为空'<br>                    },<br>                    emailAddress: {<br>                        message: '非法邮箱格式'<br>                    }<br>                }<br>                }<br>            }<br>        });<br>    });

以上就是短视频带货源码，实现注册和对注册账号的验证，更多内容欢迎关注之后的文章