vue+Element中手机、密码及邮箱验证

最新推荐文章于 2023-07-27 11:48:53 发布

发际线往后走的大头

最新推荐文章于 2023-07-27 11:48:53 发布

阅读量1.6k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_46951524/article/details/106207433

版权

本文介绍了在Vue.js结合Element UI库中进行手机、密码和邮箱验证的方法。通过设置验证对象，监听点击事件，创建弹框提示，并在data中定义规则来实现数据验证。整个过程简洁易懂。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

验证首先有需要验证的对象

账号注册的点击按钮

<el-button @click="newuse">账号注册</el-button>

随随便便一个简单的点击事件

html中写个弹框

<el-dialog title="注册账号" :visible.sync="newsuser" width="30%"  @close="resetForm('form')">
   <el-form ref="form" :model="form" :rules="rules" label-width="70px">
    <el-form-item label="手机号" prop="phone">
     <el-input v-model="form.phone"></el-input>
    </el-form-item>
     <el-form-item label="密码" prop="apass">
     <el-input type="password" v-model="form.apass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  label="确认密码" prop="checkPass">
     <el-i