vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)

new Vue({
    el: '#register',
    data: function() {
        // 验证邮箱
        let checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!value) {
                return callback(new Error('请输入电子邮箱'))
            }
            if (mailReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的邮箱格式'))
            }
        }
        // 验证手机号
        let checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[34578]\d{9}$/
            if (!value) {
                return callback(new Error('请输入手机号码'))
            }
            if (phoneReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的手机号码'))
            }
        }
        // 验证确认密码
        let checkRePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            }else if (value !== this.register.password) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        // 验证中文姓名
        let checkRealName = (rule, value, callback) => {
            //验证名字的正则表达式
            const realnameReg = /^[\u4E00-\u9FA5]{2,6}$/
            if (!value) {
                return callback(new Error('请输入真实姓名'))
            }
            setTimeout(() => {
                if (!realnameReg.test(value)) {
                    return callback(new Error('请输入2-6个汉字'))
                } else {
                    callback()
                }
            }, 100)
        };
    
        // 验证中文姓名
        let checkIdNumber = (rule, value, callback) => {
            const idNumberReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/
            if (!value) {
                return callback(new Error('请输入身份证号码'))
            }
            setTimeout(() => {
                if (!idNumberReg.test(value)) {
                    return callback(new Error('请输入正确格式的身份证号码'))
                } else {
                    callback()
                }
            }, 100)
        }
        return {
            loading: false,
            register:{
                username:'',
                mobile:'',
                mobilecode:'',
                email:'',
                password:'',
                repassword:'',
                realname:'',
                radios:'',
                idcard:'',
            },
            registerRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },
                    ],
                mobile: [{ required: true, trigger: 'blur', validator: checkPhone  }],
                mobilecode: [{ required: true, message: '请输入手机验证', trigger: 'blur' }],
                email: [{ required: true, trigger: 'blur', validator: checkEmail }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },
                    ],
                repassword:[{ required: true, trigger: 'blur', validator: checkRePass }],
                realname: [{ required: true, trigger: 'blur', validator: checkRealName  }],
                idcard: [{ required: true, trigger: 'blur' , validator: checkIdNumber }],
                verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
            },
            verifySrc:'',
            verify_status:true,
            success_url:'',
            site_title:'',
        }
    },
    
    mounted(){
        this.captch()
    },
    methods:{
        captch(){
            axios("{:url('/verify')}").then(res => {
                if(res.data.status == 200){
                    this.verifySrc = res.data.data.img
                    this.register.key = res.data.data.key
                    this.success_url = res.data.success_url
                    this.site_title = res.data.site_title
                }else{
                    this.$message.error('验证码获取失败!')
                }
            })
        },
        refeshVerifySrc() {
            this.captch()
        },
        handleRegister(){
            this.$refs['register'].validate(valid => {
                if(valid){
                    this.loading = true
                    axios.post("{:url('/register')}",this.register).then(res => {
                        if(res.data.status == 200){
                            this.$message.success(res.data.msg)
                            window.location.href = '/';
                        }else{
                            this.loading = false
                            this.refeshVerifySrc()
                            this.$message.error(res.data.msg)
                        }
                    })
                }
            })
        }
    },
})