trash_recycling
/
resister.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <!-- 引入样式 -->
    <link href="./plugins/Bootstrap4.6.1/css/bootstrap.css" rel="stylesheet">
    <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link href="./css/main.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="./plugins/js/jquery.js"></script>
    <script src="./plugins/Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
    <script src="./plugins/js/vue.js"></script>
    <script src="./plugins/js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <div class="login ml-auto mr-auto mt-5 border rounded">
        <h1 class="alert-success  text-center p-1">注册</h1>
        <form class="login   mx-auto p-3 " action="">
            <div class="form-group">
                <label for="u_name">姓名</label>
                <input type="text" class="form-control" v-model="userinfo.u_name" id="u_name"
                       aria-describedby="emailHelp">
                <small class="form-text text-muted">请输入姓名</small>
            </div>
            <div class="form-group">
                <label for="u_phone">手机号</label>
                <input type="text" class="form-control" v-model="userinfo.u_phone" id="u_phone"
                       aria-describedby="emailHelp">
                <small class="form-text text-muted">请输入手机号</small>
            </div>
            <div class="form-group">
                <label for="u_pwd">密码</label>
                <input type="password" class="form-control" v-model="userinfo.u_pwd" id="u_pwd">
                <small class="form-text text-muted">请输入6-18位密码,只能是数字字母下划线</small>
            </div>
            <!--            <div class="form-group">-->
            <!--                <label for="u_pwd">密码</label>-->
            <!--                <input type="password" class="form-control"  v-model="userinfo.u_pwd" id="u_pwd">-->
            <!--                <small  class="form-text text-muted">请输入6-18位密码,只能是数字字母下划线</small>-->
            <!--            </div>-->
            <div class="form-group">
                <label for="address">住址</label>
                <input type="text" class="form-control" v-model="userinfo.address" id="address"
                       aria-describedby="emailHelp">
                <small class="form-text text-muted">请输入手机号</small>
            </div>
            <div class="form-group">
                <label for="gender0">性别</label><br>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="gender0" v-model="userinfo.gender" value="0" class="custom-control-input">
                    <label class="custom-control-label" for="gender0">男</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="gender1" v-model="userinfo.gender" value="1" class="custom-control-input">
                    <label class="custom-control-label" for="gender1">女</label>
                </div>
            </div>
            <button type="button" class="btn btn-primary" @click="resister()">注册</button>
            <a href="./index.html" class="float-right">已有账号？ 点这里登录</a>
        </form>
    </div>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            userinfo: {
                u_id: null,
                u_name: '',
                u_phone: '',
                u_pwd: '',
                address: '',
                gender: null
            }
        },
        created() {

        },
        methods: {
            resister() {
                // 正则验证
                if (!/^[\u4E00-\u9FA5A-Za-z]+$/.test(this.userinfo.u_name.trim())) {
                    alert("请输入正确的姓名")
                    return;
                }
                if (!/^1(3|4|5|6|7|8|9|)\d{9}$/.test(this.userinfo.u_phone.trim())) {
                    alert("请输入正确的11位手机号！")
                    return;
                }
                if (!/^[A-z0-9_]{6,18}$/.test(this.userinfo.u_pwd.trim())) {
                    alert("请正确输入6-18位密码,只能是数字字母下划线");
                    return;
                }
                if (this.userinfo.address.trim().length < 3) {
                    alert("请输入3位以上的有效地址");
                    return;
                }
                if (!this.userinfo.gender) {
                    alert("请选择性别");
                    return;
                }
                axios.post("./userinfo.php?action=resister", this.userinfo).then(res => {
                    console.log(res);
                    if (res.data == 1) {
                        alert('注册成功');
                        window.location.href = 'index.html';
                    }
                })
            }
        }
    })
</script>
</html>