表单内容
在这里插入图片描述
1、写在data内验证:
:代表这是一个表单
-> ref:表单被引用时的名称,标识 是我们绑定的对象
-> rules:是动态绑定的rules,表单验证规则
-> model:表单数据对象 是绑定我们form表单中需要提交给后台的一个对象
-> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值
-> :表单中的每一项子元素
-> label:标签文本
-> prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
在每一个el-form-item上面绑定prop属性,这个属性就是我们下面要做正则校验的地方
:输入框
-> v-model:绑定的表单数据对象属性
-> style:行内样式
-> maxlength:最大字符长度限制
2.data数据
在这里插入图片描述
formRules:与上文 ‘表单内容’ 中 表单的 :rules 属性值相同
userName:与上文 ‘表单内容’ 中 表单子元素的 prop 属性值相同
在这里插入图片描述
var validatePass = (rule, value, callback) => //就是我们的回调函数,需要大家注意的是,这个没有在return的对象中,在data中
rules: { // 就是我们在el-form中绑定的rules,进行表单的验证

name: [ // 我们在el-form-item中绑定的prop,就是这里的name,需要大家注意,这具有唯一性


{ required: true, message: '请输入姓名', trigger: 'blur' } // require:是否必填,如不设置,则会根据校验规则自动生成;message:是提示的内容;trigger:是什么事件触发
trigger: ‘blur’ 表示“当失去焦点时(光标不显示的时候),触发此提示” 


],
{ validator: missionPass, trigger: 'change' } // validator:对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise
Logo

前往低代码交流专区

更多推荐