标签：inf nbsp 创建 idt 字符 blur 结构 登录密码 item
表单：
确保element-ui引进引入，或者按需引入时，引入对应的组件
1.简单结构实例：
<el-form label-width=‘0px‘>
<el-form-item>
<el-input></el-input>
</el-form-item>
<el-form-item>
<el-button></el-button>
</el-form-item>
</el-form>
2.如何绑定form里面的数据呢？
主要分为3步：
1.在<el-form>标签中 使用 :model=‘loginForm’ 将fome绑定到loginForm对象中去
2.在data中创建loginForm对象
3.在对象的组件里面绑定loginForm里面的对象，如：<el-input v-model=‘loginForm.username‘>
具体代码如下：
<el-form label-width=‘0px‘ :model="loginForm"> //用户名 <el-form-item> <el-input v-model=‘loginFrom.username‘></el-input> </el-form-item> //密码 <el-form-item> <el-input v-model=‘loginFrom.password‘></el-input> </el-form-item> <el-form-item> <el-button></el-button> </el-form-item> </el-form> data(){ return{ loginFrom:{ username:‘‘, password:‘‘ } } }
3.如何进行form表单校验
主要分为3步：
1.使用 :rules给form表单绑定验证属性
2.在data中声明loginFormRules属性，书写校验内容，如何触发等
3.在<el-form-item>中使用prop绑定在loginFormRules中声明的验证名，就可以使用表单验证了
具体代码如下：
<el-form label-width=‘0px‘ :model="loginForm" :rules="loginFormRules"> //用户名 <el-form-item prop=‘username‘> <el-input v-model=‘loginFrom.username‘></el-input> </el-form-item> //密码 <el-form-item prop=‘password‘> <el-input v-model=‘loginFrom.password‘></el-input> </el-form-item> <el-form-item> <el-button></el-button> </el-form-item> </el-form> data(){ return{ loginForm:{ username:‘‘, password:‘‘ }, loginFormRules:{ username:[ { required: true, message: ‘请输入登录名称‘, trigger: ‘blur‘ }, { min: 3, max: 8, message: ‘长度在 3 到 8 个字符‘, trigger: ‘blur‘ } ], password:[ { required: true, message: ‘请输入登录密码‘, trigger: ‘blur‘ }, { min: 6, max: 15, message: ‘长度在 6 到 15 个字符‘, trigger: ‘blur‘ } ] } } }
标签：inf nbsp 创建 idt 字符 blur 结构 登录密码 item
原文地址：https://www.cnblogs.com/a973692898/p/13234442.html
