学习项目中遇到的知识点
一、 data()中使用
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可
- 标签要绑定rules属性,即在标签内部声明 rules = “loginFormRules”
- 双引号内名字可以自己定义,随后在data中声明此为表单验证规则对象 标签要绑定prop属性,即在标签内部声明
- prop = "username” ;username表示在表单验证规则对象中定义的属性
- required: true 表示必填项
- trigger: 'blur’表示当失去焦点时触发
下面展示一些 代码
。
<!-- 登录表单区域-->
<el-form
label-width="0px"
class="login-form"
:model="loginForm"
:rules="loginFormRules">
<!--用户名-->
<el-form-item prop="username">
<el-input
prefix-icon="iconfont icon-denglu-yonghu"
v-model="loginForm.username"
></el-input>
data(){
return{
//登录表单的数据绑定
loginForm:{
username:'',
password:''
},
// 表单验证规则对象
loginFormRules:{
// 验证用户名是否合法
username:[
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],