Vue輸入的規則自定義設定

2021-10-08 13:52:17 字數 1185 閱讀 7018

在完成乙個功能的時候要求實現乙個要求,就是輸入的資料不能為空並且要小數點後兩位,我知道是使用了:rules="datarule"在el-form上面,然後自定義的情況還是乙個寫,我在這裡記錄一下

我們在完成乙個表單提交的時候可能需要對方提交的資料是乙個合法的資料而不是乙個不合法的資料,我們需要在這裡實現乙個自定的規則。

首先在el-form上面新增注意是:rules屬性

然後去

export default 

}|

去定義我們具體的規則,在這裡需要注意的是,如果你要的寫自定義規則你需要在我上面的地方去定義規則,但是你要是單純的只是使用他自己帶的,可以在compute裡面去定義規則,然後定義規則的格式

datarule: ],

contractamount: [)?$/,

trigger: 'blur'

}],weekamount: [)?$/,

trigger: 'blur'

},],

yearamount: [)?$/,

trigger: 'blur'

},],

allamount: [)?$/,

trigger: 'blur'

},],

},

上面有三種規則,第一種就是最普通的非空規則,只要是非空都會給報的,也是最簡單的,然後就是我們的限制輸入數字的規則加上pattern: /^[0-9]+(.[0-9])?$/,模式正則就可以,還有一種就是我們的手寫規則。

首先需求是這樣的的,有兩個變數,周完成量,年完成量,自開工完成量,這三者是累加的關係,年=年+周,自開工=自開工+年,於是我們就要保證周小於年,小於自開工,我們通過這一句,手寫乙個validator,那我們在那裡面去寫呢,在data()裡面,但是不在return裡面,

export default 

if(this.dataform.yearamount>this.dataform.allamount)

callback()

} else

}

只擷取了一部分,然後就是我們的邏輯部分,然後當輸入的為空的時候還是會顯示為空的警告,但是如果不符合我們的設定的情況就是顯示我們實際加上的規則的報錯在頁面上

vue自定義全域性設定

vue2.x中在static下新建乙個serverconfig.js,vue3中在public下新建乙個serverconfig.js const win window global win.apiconfig 然後在index.html頁面裡面引入js.在axios全域性設定js裡,設定baseu...

LINQ Intersect 自定義規則

如果你還不了解intersect,可參考這往篇文章 實際專案中,往往需求會複雜的多 比如有這樣乙個product類 public class product public string productname public double unitprice 需求是只要兩個product的 id和pr...

vue自定義元件,插槽,自定義事件

vue.component 自定義元件名 自定義模板 裡面套html標籤,可以取屬性的值 vue.component lover new vue script lover div 自定義元件模板 bitqian標籤 vue.component bitqian new vue script v for...