element 表单验证的基本使用

Form组件提供了表单验证的功能
基本使用步骤：
1：给el-form添加rules属性，通过rules提供规则，
2：在data中提供rules规则
3:给每一个需要校验的elform-item 添加prop
具体使用步骤：
1：需要通过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属性设置为需校验的字段名

正则校验
required 必须的，例如校验内容是否非空
pattern 正则表达式，例如校验手机号码格式、校验邮箱格式
range 使用min和max属性定义范围，对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字补得小于min，也不得大于max

image.png

不要忘了配置prop

自定义校验
element ui支持传入一个函数，进行自定义校验的配置
语法： 自定义校验规则
{ validator：校验函数，trigger： ' '}

image.png

不要忘了配置prop

image.png

登录时提交校验
每次点击按钮，进行ajax请求前，应该先对整个表单内容校验，不然还是会发送很多无效的请求
需求：要通过校验了，才发送请求
步骤：
1:给登录按钮注册点击事件

image.png

2:登录时，需要对整个表单进行校验，首先需要获取表单

image.png

3：登录时，通过$refs获取到表单，进行校验

image.png

上述案例使用到的知识点
ref属性配合refs: 任何组件都有refs可以获取到是当前组件上所有的标记

ref被用来给DOM元素或子组件注册引用信息，引用信息会根据父组件的nextTick( () => {} )

image.png

image.png

为了在created或其他vue的钩子函数中引用Dom元素，先在dom中使用ref标签进行注册，然后便可以通过this. refs 是一个对象，持有已注册过的所有子组件，
关于ref注册时间的说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候不能访问他们，有因为他们还不存在， refs对象上，如果在普通的dom元素上使用，引用指向就是dom元素，如果在子组件上使用，引用就指向ref的一个集合
在上面的例子中，input的引用信息为input1， refs.input1) console.log(document.getElementById("input1"))两种方法获得的都是DOM节点，而 refs只在组件渲染完成后才填充的，并且它是非响应式的，它仅仅是一个直接操作子组件的应急方案，应当避免在模板或计算属性中使用$refs