element-ui表单验证
2017-12-11 23:53
751 查看
1. html
<el-form :model="user" :rules="rules" ref="ruleForm" label-width="80px"> <el-form-item label="用户名" prop="username" class="delu-box"> <el-input v-model="user.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密 码" prop="password" class="login-password delu-box"> <el-input v-model="user.password" placeholder="请输入密码" type="password" @keyup.native.enter="handleSubmit"></el-input> </el-form-item> <el-form-item class="delu-box"> <el-button type="primary" @click.native.prevent="login" :loading="btnLoading" style="float: left;">登录 </el-button> <el-button @click.native.prevent="handleReset" style="float: right;">重置</el-button> </el-form-item> </el-form>
2. 设置data()默认数据
data () {return {user: {username: '',password: ''},rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'}],password: [{required: true, message: '请输入登录密码', trigger: 'blur'}]}}
3. methods验证
methods: {
login () {this.$refs.ruleForm.validate((valid) => {if (valid) {console.log('2222222222')this.user.password = Md5.md5(this.user.password)this.$store.dispatch('login', this.user).then(() => {axios({method: 'post',url: this.uploadAddr + 'public/getToken',data: {data: this.user.username + new Date().getTime()}}).then(response => {window.localStorage.setItem('token', response.data)axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.getItem('token')})this.$router.push({path: '/admin'})}).catch(err => {this.$message.error(err)})}})},handleReset () {this.$refs.ruleForm.resetFields()},handleSubmit () {this.login()}
}
相关文章推荐
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- element ui 里的表单验证说明
- element ui 表单验证 要主要的问题(小结1)
- vue + ElementUI 关闭对话框清空验证,清除form表单
- elementUI表单校验——自定义验证
- element-ui的表单验证问题
- vue elementUI之Form表单 验证
- ElementUI表单验证例子
- vue elementUI之Form表单 验证
- element ui表单验证
- 饿了么组件库element-ui正则表达式验证表单,后端验证表单
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue + ElementUI 关闭对话框清空验证,清除form表单
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- ElementUI之表单验证、数据绑定、路由跳转
- Vue ElementUI之Form表单验证遇到的问题
- vue中使用element-ui进行表单验证的实例代码
- Vue Elementui Form表单验证
- elementui 表单验证