2
/8
在d出的页面点击“检查表单”
3
/8
点击第一个,然后点击“必需的”,点击“数字”
4
/8
点击第二个,点击“必需的”,点击“电子邮件地址”,然后点击“确定”
5
/8
选择“onClick”,然后点击“文件”——“保存”
6
/8
输入用户名,则出现用户名表单验证提示
7
/8
输入密码,出现密码的表单验证提示
8
/8
点击“登录”,出现用户名表单验证提示和密码的表单验证提示
这个就是dw21版本添加表单验证
Form组件提供了表单验证的功能基本使用步骤:
1:给el-form添加rules属性,通过rules提供规则,<el-form :rules="rules">
2:在data中提供rules规则
3:给每一个需要校验的elform-item 添加prop
具体使用步骤:
1:需要通过rules属性传入约定的验证规则
<el-form class="login-form" :model="form" :rules="rules">
2:在data中准备rules规则
rules:{
mobile:[
{ required:true, message: '请输入手机号', trigger:['blur','change']},
{min: 5,max:11,message:'长度在5到11个字符', trigger:['blur','change'] }
]
}
3:将Form-item的prop属性设置为需校验的字段名
<el-form-item prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入在手机号"></el-form>
<el-form-item>
正则校验
required 必须的,例如校验内容是否非空
pattern正则表达式,例如校验手机号码格式、校验邮箱格式
range 使用min和max属性定义范围,对于字符串和数组类型,将根据长度进行比较,对于数字类型,数字补得小于min,也不得大于max
不要忘了配置prop
<el-form-item prop="code">
自定义校验
element ui支持传入一个函数,进行自定义校验的配置
语法: 自定义校验规则
{ validator:校验函数,trigger: ' '}
不要忘了配置prop
登录时提交校验
每次点击按钮,进行ajax请求前,应该先对整个表单内容校验,不然还是会发送很多无效的请求
需求:要通过校验了,才发送请求
步骤:
1:给登录按钮注册点击事件
2:登录时,需要对整个表单进行校验,首先需要获取表单
上述案例使用到的知识点
ref属性配合 refs: 任何组件都有 refs可以获取到是当前组件上所有的标记
ref被用来给DOM元素或子组件注册引用信息,引用信息会根据父组件的 nextTick( () =>{} )
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)