注册前端代码分析

表单校验

https://blog.csdn.net/qq_41402200/article/details/86016313

1、失去焦点时验证

2、表单提交时验证

分析register.html

    <div class="item">
    <div class="form">
    <h3 class="loginsign-title">用户注册</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="用户昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>

            <el-form-item label="生日" required>
                <el-col :span="11">
                    <el-form-item prop="birthday">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.birthday" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio label="男" v-model="male"></el-radio>
                    <el-radio label="女" v-model="female"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" @blur="checkEmail"></el-input>
            </el-form-item>

            <el-form-item label="电话" prop="telephone">
                <el-input v-model="ruleForm.telephone"></el-input>
            </el-form-item>

            <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div></div>

<!--  <div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
-->

<script>
    /* 脚本中创建对象,处理业务 */
    new Vue({
        el: '#app',
        data: {
            ruleForm: {
                nickname: '',
                password: '',
                birthday: '',
                gender: '',
                email: '',
                telephone:'',
                address:''
            },
            rules: {
                nickname: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                email: [
                    { required: true, message: '请填写邮箱', trigger: 'blur' }
                ],
                telephone: [
                    { required: true, message: '请填写联系电话', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请填写地址', trigger: 'blur' }
                ]
            }
        },
        methods: {
            checkEmail: function() {
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (this.ruleForm.email != '' && !regEmail.test(this.ruleForm.email)) {
                    this.$message({
                        message: '邮箱格式不正确',
                        type: 'error'
                    })
                    this.ruleForm.email = ''
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        axios.post('/member/register', this.ruleForm).then(function (response) {
                            //得到响应数据
                            var res = response.data;
                            //判断成功与否
                            if(res.flag){
                                window.open('/index.html','_self');
                            }else{
                                alert("提示："+res.message)
                            }
                        }).catch(function (err) {
                            this.$message({
                                message: '服务器正忙......',
                                type: 'error'
                            });
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    });
</script>
</body>
</html>