Vue/ Vue ELement框架、表单效验正则属性、兜底效验(点击登录后会验证文本框是否满足条件)

一.表单效验正则属性

语法:

//HTML

<el-form  :model="data内对象名" :rules="自定义属性值"> </el-form>

 <el-form-item prop="form对象内当前属性值"> </el-form-item>

// JS

:rules属性值: {

    prop属性值: [

{ required: true, message: '提示信息', trigger: 'blur' }，

{ min: 最小值number, max: 最大值number, message: '提示信息', trigger: 'blur' }

{  pattern: 正则, message: '提示信息', trisger: 'blur' }

]}

注意:
prop属性值的名称 需要和form对象内当前属性名称一致

属性说明:

1. HTML 

:model="data内对象名"  : 表示效验数据

:rules="自定义属性值"  : 表示效验规则是什么

prop="form对象内当前属性值"  : 表示效验项名字

2.JS

required : 是否为必须的，用于验证表单是否为空 

message: '提示信息' :错误时提示给用户的信息

trigger: 'blur' : 触发时机

min和max : 表示最小值 和 最大值 ，最低输入几位，最大输入几位 类型是number

pattern : 正则判断

二. 兜底效验

语法:

DOM元素.validate(效验结果 => { 

})

参数说明: 回调函数第一个参数就是效验结果， 打印出来 true是成功 false是失败

应用场景: 点击登录时，验证账号框 密码框 输入文本是否符合要求

validate说明: 对整个表单效验的方法 参数为一个回调函数 该回调函数 会在效验结束后被调用 并传入两个参数 是否验证成功和未通过验证 若不传入回调函数 则返回 promise

validate简单说明: 进行表单效验 会效验所有的表单