ElementUI表单验证 图片详解

效果

* 客 户 拒 收 时 间 
@ 谲 选 日 时 间 
远 客 户 拒 收 时 间 
* 客 户 拒 原 因 
后 远 客 产 攻 原 因 
生 成 售 退 货 单 
返 回

 

VUE代码五要素

(el -form : 
" : rules= " rules" ref = " createParams " > 
< el -form-item label= " Z " > 
< el -date-picker 
v- model= " createParams . returnDate " 
type= " datetime " 
placeholder= " > 
< / el -date-picker> 
< / el -form- item> 
<el-form-item prop= " reason " > 
<el-select v-mode1="createParams. reason" placeholder 
<el-option " 
<el-option value="2" 
< /e1- select > 
< / el -form- item> 
< el -form-item> 
-button type= " primary" " submit 
' createParams ' 
" / el - button > 
< el -button " backout( ' createParams ' ) " > @ < /el -button > 
< / el -form- item> 
< / el -form>

 

①表单要用 :model关联VUE的对象,这个对象用于储存表单的值

-let sales={ 
" index" , 
name : 
data() { 
return { 
createParams : { 
orderNumber: ' 
returnDate: ' 
reason :

 

②用 :rules给表单指定验证规则,json对象格式,内部储存的元素也是json格式,元素的key与表单的组件的prop一一对应,元素的value可以存多条规则,规则也是json格式,由四个属性构成

type:表单允许接受的数据类型,不填则表示什么类型都可以

required:设置表单是否必填 布尔类型

message:用户不填或者填错时提示信息

trigger:触发表单验证的事件,一般是change,输入框可以用blur

Aet sales={ 
" index" , 
name : 
data() { 
return { 
createParams : {orderNumber: 
rules: { 
returnDate: C 
{ type: 'date ' ,required: true, message: 
' , trigger: " change " 
reason: C 
{ required: true, message: , trigger: " change " }

 

③ref 设置自定义名称,代指当前这个表单,通常与:model一致(或者说与储存值的VUE对象一致),用于表单提交时验证用

 

④表单中的每个组件用prop关联VUE对象中的属性,例如:组件存值到VUE对象的reason属性,那么prop="reason",并且这个prop用于②的key

 

⑤表单的提交按钮将③的ref传过去,下图表单验证和重置表单验证的代码可以直接从ElementUI官方文档拿到,方法的参数值就是ref,在if分支执行自己写的方法

submit ( createParams ) { 
this . $refs C createParams] . validate( (valid) 
if (valid) { 
this . createReturn() 
} else { 
console . log( 
'error submit!!' 
return false; 
reset (createparams) { 
this . $refs C createParams] . resetFie1ds() ; 
saSÉ5fiik 
async

posted @ 2021-10-05 00:08  夏·舍  阅读(162)  评论(0编辑  收藏  举报