element-ui表單驗證例子:validateField驗證部分表單

https://blog.csdn.net/frank_fong/article/details/98486989


https://segmentfault.com/q/1010000020201436?utm_source=tag-newest


<!DOCTYPE html>

<html lang="zh-CN">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">

? ? <title>elementUI</title>

? ? <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

? ? <link rel="stylesheet" >

? ? <script src="https://unpkg.com/element-ui/lib/index.js"></script>

? ? <style>

? ? ? ? #app {

? ? ? ? ? ? width: 600px;

? ? ? ? ? ? margin: 30px;

? ? ? ? }

? ? </style>

</head>

<body>

? ? <div id="app">

? ? ? ? <el-form :model="myModel" :rules="rules" ref="myForm" size="small" label-width="100px">

? ? ? ? ? ? <el-form-item label="姓名" prop="name">

? ? ? ? ? ? ? ? <el-input v-model="myModel.name" clearable></el-input>

? ? ? ? ? ? </el-form-item>

? ? ? ? ? ? <el-form-item label="郵箱" prop="email">

? ? ? ? ? ? ? ? <el-input v-model="myModel.email" clearable></el-input>

? ? ? ? ? ? </el-form-item>

? ? ? ? ? ? <el-form-item>

? ? ? ? ? ? ? ? <el-button type="warning" size="medium" @click="validateEmail('myForm')">驗證字段</el-button>

? ? ? ? ? ? ? ? <el-button type="primary" size="medium" @click="submitForm('myForm')">驗證全部</el-button>

? ? ? ? ? ? </el-form-item>

? ? ? ? </el-form>

? ? </div>

? ? <script>

? ? ? ? new Vue({

? ? ? ? ? ? el: "#app",

? ? ? ? ? ? data: {

? ? ? ? ? ? ? ? myModel: {

? ? ? ? ? ? ? ? ? ? name: '',

? ? ? ? ? ? ? ? ? ? email: ''

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? rules: {

? ? ? ? ? ? ? ? ? ? name: {

? ? ? ? ? ? ? ? ? ? ? ? required: true,

? ? ? ? ? ? ? ? ? ? ? ? message: '請輸入姓名',

? ? ? ? ? ? ? ? ? ? ? ? trigger: ['change', 'blur']

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? email: {

? ? ? ? ? ? ? ? ? ? ? ? required: true,

? ? ? ? ? ? ? ? ? ? ? ? message: '請輸入郵箱',

? ? ? ? ? ? ? ? ? ? ? ? trigger: ['change', 'blur']

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? methods: {

? ? ? ? ? ? ? ? validateEmail(formName) {

? ? ? ? ? ? ? ? ? ? this.$refs[formName].validateField('email', emailError => {

? ? ? ? ? ? ? ? ? ? ? ? if (!emailError) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('郵箱驗證通過!');

? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('郵箱驗證失敗');

? ? ? ? ? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? submitForm(formName) {

? ? ? ? ? ? ? ? ? ? this.$refs[formName].validate((valid) => {

? ? ? ? ? ? ? ? ? ? ? ? if (valid) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? alert('submit!');

? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('error submit!!');

? ? ? ? ? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

? ? </script>

</body>

</html>

————————————————

版權(quán)聲明:本文為CSDN博主「FrankFang7」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明谷醉。

原文鏈接:https://blog.csdn.net/frank_fong/article/details/98486989

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末狸相,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钓试,死亡現(xiàn)場離奇詭異,居然都是意外死亡副瀑,警方通過查閱死者的電腦和手機(jī)弓熏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來糠睡,“玉大人挽鞠,你說我怎么就攤上這事”房祝” “怎么了信认?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長均抽。 經(jīng)常有香客問我嫁赏,道長,這世上最難降的妖魔是什么油挥? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任潦蝇,我火速辦了婚禮款熬,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘护蝶。我一直安慰自己华烟,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布持灰。 她就那樣靜靜地躺著,像睡著了一般负饲。 火紅的嫁衣襯著肌膚如雪堤魁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天返十,我揣著相機(jī)與錄音妥泉,去河邊找鬼。 笑死洞坑,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的迟杂。 我是一名探鬼主播刽沾,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼排拷,長吁一口氣:“原來是場噩夢啊……” “哼侧漓!你這毒婦竟也來了监氢?” 一聲冷哼從身側(cè)響起布蔗,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎浪腐,沒想到半個月后纵揍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體议街,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泽谨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年傍睹,在試婚紗的時候發(fā)現(xiàn)自己被綠了隔盛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡拾稳,死狀恐怖吮炕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情访得,我是刑警寧澤陕凹,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站鳄炉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏拂盯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一谈竿、第九天 我趴在偏房一處隱蔽的房頂上張望团驱。 院中可真熱鬧空凸,春花似錦嚎花、人聲如沸呀洲。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兵罢。三九已至,卻和暖如春趣些,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背贰您。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锦亦,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓杠园,卻偏偏與公主長得像,于是被迫代替她去往敵國和親抛蚁。 傳聞我的和親對象是個殘疾皇子陈醒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容