Vue-邮箱正则验证

Posted 2022-01-04 zltao

 

<el-form ref="emailForm" :model="emailForm" :rules="rules" label-width="120px">
    <el-form-item label="电子邮箱" prop="mailAddress">
        <el-input placeholder="请填写邮箱地址" v-model="emailForm.mailAddress" @blur="sendEmail"></el-input>
    </el-form-item>
</el-form>

    export default 
        name: ‘email‘,
        data() 
            return 
                emailForm: 
                    mailAddress: null
                ,
                rules: 
                    mailAddress: [ required: true, message: ‘请填写电子邮箱‘, trigger: ‘change‘ ]
                
            
        ,
        methods: 
            sendEmail: function() 
                var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5][email protected][a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                if (this.emailForm.mailAddress != ‘‘ && !regEmail.test(this.emailForm.mailAddress)) 
                    this.$message(
                        message: ‘邮箱格式不正确‘,
                        type: ‘error‘
                    )
                    this.emailForm.mailAddress = ‘‘