自定义表单校验
<template> <div class="login-area container-area"> <h3 class="set-center"> <router-link to="/login">登录</router-link> <el-divider direction="vertical"></el-divider> <router-link to="/register">注册</router-link> </h3> <el-form ref="form" :rules="formRules" :model="form"> <el-form-item prop="username"> <el-input placeholder="用户名" v-model="form.username" clearable prefix-icon="el-icon-user" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input placeholder="密码" v-model="form.password" clearable show-parssword prefix-icon="el-icon-lock" ></el-input> </el-form-item> <el-form-item prop="code"> <el-row> <el-col :span="17"> <el-input placeholder="验证码" v-model="form.code" prefix-icon="el-icon-mobile" ></el-input> </el-col> <el-col :span="7"> <div class="code-area"> <Identity :changeCode.sync="identifyCode"></Identity> </div> </el-col> </el-row> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> <el-button @click="onReset">重置</el-button> </el-form-item> </el-form> </div> </template> <script> import Identity from "@/components/Identity"; export default { name: "Login", components: { Identity }, data() { const codeValid =(rule, value, callback)=>{ console.log(value) console.log(this.identifyCode) if (value!=this.identifyCode) { callback(new Error("验证码输入错误")); } else { callback(); } }; return { form: { username: "", password: "", code: "" //验证码 }, identifyCode: "", //随机生成的验证码 formRules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" }, { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" } ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, { min: 3, max: 10, message: "长度在3-10个字符", trigger: "blur" } ], code: [ { required: true, message: "请输入验证码", trigger: "blur" }, { validator: codeValid, trigger: "blur" } ] } }; }, created() { document.getElementsByTagName("body")[0].style.background = "#f5f5f5"; }, mounted() { console.log(this.identifyCode) }, methods: { // 提交信息 onSubmit() { // console.log(this.$refs["form"]) this.$refs["form"].validate((valid)=>{ if(valid){ alert("submit") }else{ alert("error") } }) }, // 重置信息 onReset() {} } }; </script> <style scoped> .container-area { 400px; margin: 0px auto; margin-top: 10%; background-color: #ffff; padding: 20px; } .set-center { text-align: center; font-weight: 500; } .set-center > a { text-decoration: none; color: #409EFF; } .code-area { cursor: pointer; } .router-link-active{ font-weight: bold; } </style>
自定义表单校验的时候
const codeValid =(rule, value, callback)=>{
if (value!=this.identifyCode) {
callback(new Error("验证码输入错误"));
} else {
callback();
}
};
codeValid的结果是一个箭头函数,不然“this.属性名”获取不到data中定义的属性.