el-fromel-from-item 表单 表单验证 表单预校验

先用el-from包裹，e-lform 里面有子项 el-from-item，每一个表单就一个子项el-from-item

ref是引用对象，可以配置重置等方法，:model数据绑定，:rules验证规则

子项 用v-model="loginForm.username"绑定数据

<!-- ref是引用对象，可以配置重置等方法，:model数据绑定，:rules验证规则 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_from"> <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input> </el-form-item> <!-- 按钮 --> <el-form-item class="btns"> <el-button type="primary" @click="login">登录</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form>

数据，以及表单验证规则

export default { data () { return { // 这是登录表单的数据绑定对象 loginForm: { username: 'admin', password: '123456' }, // 这是表单的验证规则对象 loginFormRules: { // 验证用户名是否合法 username: [ { required: true, message: '请输入登录名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], // 验证密码是否合 password: [ { required: true, message: '请输入登录密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] } } },

表单预校验，点击登录，表单不合格放回false，并且停止运行，if里面要true才运行，所以取反

login () { validate里面是个回调函数，valid是布尔值，表单合格valid就是true this.$refs.loginFormRef.validate(async valid => { if (!valid) return urll

合格就发送请求什么的啦