Join.vue_20211215

<template>
<br />
    <div class="container1">
        <h3>회원가입</h3>
        <hr />
      <el-form label-width="90px">
        <el-form-item label="아이디: ">
            <el-input v-model="userid" ref="userid1"></el-input>
            <el-button type="info" >중복확인</el-button>
        </el-form-item>
            <!-- <label style="width:200px;"> 암호: </label> -->

        <el-form-item label="암호: ">
            <el-input v-model="userpw" ref="userpw11" show-password></el-input>
        </el-form-item>
   
        <el-form-item label="암호확인: ">
            <el-input v-model="userpw" ref="userpw12" show-password></el-input>
        </el-form-item>
        <el-form-item label="연락처:">
            <el-input v-model="usernumber" ref="usernumber1"></el-input>
        </el-form-item>
        <el-form-item label="이메일:" >
            <el-input v-model="useremail" ref="useremail1" style="width:155px;"></el-input>@
            <el-select v-model="value" clearable placeholder="Select" style="width:170px;" >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        </el-form-item>
        <el-checkbox v-model="chk1" label="약관동의" size="medium"></el-checkbox><br />
        <el-button type="success" @click="handleJoin">회원가입</el-button>
        <el-button type="primary">로그인</el-button>
    </el-form>



<hr />
        <!-- <div class="mydiv1">
            <label class="lbl1">아이디</label>
            <input type="text" v-model="userid" ref="userid" placeholder="아이디" />
            <input type="button" value="중복확인" />
        </div>

        <div class="mydiv1">
            <label class="lbl1">암호</label>
            <input type="password" v-model="userpw" ref="userpw" placeholder="암호" />
        </div>

        <div class="mydiv1">
            <label class="lbl1">암호확인</label>
            <input type="password" v-model="userpw1" ref="userpw1" placeholder="암호확인" />
        </div>

        <div class="mydiv1">
            <label class="lbl1">연락처</label>
            <input type="text" v-model="usernumber" ref="usernumber" placeholder="연락처" />
        </div>

        <div class="mydiv1">
            <label class="lbl1">이메일</label>
            <input type="text" v-model="useremail" ref="useremail" placeholder="이메일" />
            <label>@</label>
            <select>
                <option>naver.com</option>
                <option>daum.net</option>
                <option>gmail.com</option>
            </select>
        </div>

        <div class="mydiv1">
            <label class="lbl1"></label>
            <input type="checkbox" v-model="chk1" />
            <label>약관동의</label>
        </div>

        <div class="mydiv1">
            <label class="lbl1"></label>
            <input type="button" value="회원가입" @click="handleJoin" />
            <input type="button" value="로그인" />
        </div> -->
    </div>
</template>

<script>
import { ref, defineComponent } from 'vue'
    export default defineComponent({

        methods: {
            handleJoin() {
                if(this.userid === ""){
                    alert('아이디를 입력하세요.')
                    this.$refs.userid1.focus();
                    return false;
                }
                if(this.userpw === ""){
                    alert('암호를 입력하세요.')
                    this.$refs.userpw11.focus();
                    return false;
                }
                if(this.userpw1 === ""){
                    alert('암호확인 입력하세요.')
                    this.$refs.userpw12.focus();
                    return false;
                }
                if(this.usernumber === ""){
                    alert('연락처를 입력하세요.')
                    this.$refs.usernumber1.focus();
                    return false;
                }
                if(this.useremail === ""){
                    alert('이메일을 입력하세요.')
                    this.$refs.useremail1.focus();
                    return false;
                }
                if(this.chk1 === false){
                    alert('약관에 동의하세요.')
                    return false;
                }
            }
        },
        data() {
            return {
                userid: '',
                userpw: '',
                userpw1: '',
                usernumber: '',
                useremail: '',
                chk1: false,
            }
        },
        setup() {
            return {
                options: ref([
                    {
                    value: 'naver.com',
                    label: 'naver.com',
                    },
                    {
                    value: 'gmail.com',
                    label: 'gmail.com',
                    },
                    {
                    value: 'daum.net',
                    label: 'daum.net',
                    },
                ]),
                value: ref(''),
            }
        }
    })
</script>

<style scoped>
    /* @import '../assets/css/mystyle1.css'; */
</style>