<el-form :model="ruleForm" status-icon :rules="rulesAll" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名"> <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></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>
</template> <script> import axios from 'axios'; import Vue from 'vue'; import { Form,FormItem,Input} from 'element-ui'; Vue.use(Form) Vue.use(FormItem) Vue.use(Input) export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } };
return { ruleForm: { pass: '', checkPass: '', username: '' }, //校验规则 rulesAll: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ] } } }, methods:{ submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.submitLogin(); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); },
submitLogin(){ var {pass,username} = this.ruleForm axios({ method:'post', url:'http://localhost:8081/api/login', data:{ name:username, password:pass } }).then((res)=>{ if(res.data.statusCode==200) { alert(res.data.data); localStorage.setItem('token',res.data.token); //用户访问页面的钥匙 this.$router.push({ path:'/home' }); } else { alert(res.data.data); } }); } } } </script>