VUE--Form表单

表单内容

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