最近項(xiàng)目中一直使用的element-ui作為前端框架,對(duì)于最常使用的表單驗(yàn)證,做出以下總結(jié):
創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷,專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、微信小程序定制開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā),與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同,我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念,并將策略和執(zhí)行緊密結(jié)合,且不斷評(píng)估并優(yōu)化我們的方案,為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案!
第一種常用方式:表單上加rules{object}
<el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model="formData.visitorName" placeholder="請(qǐng)輸入姓名" clearable></el-input> </el-form-item> <el-form-item label="身份證號(hào)" prop="cardCode"> <el-input v-model="formData.cardCode" :maxlength="18" placeholder="請(qǐng)輸入身份證號(hào)" clearable></el-input> </el-form-item> </el-form>
這種方式需要在data()中寫入rule{},對(duì)于需要校驗(yàn)字段prop中的如visitorName寫上驗(yàn)證規(guī)則,如下:
data() { return { formData: { visitorName: '', cardType: 1, cardCode: '' }, rule: { visitorName: [ { required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '長(zhǎng)度在 2 到 10 個(gè)字符', trigger: 'blur' }, { required: true, pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/, message: '姓名不支持特殊字符', trigger: 'blur' } ], cardCode: [ { required: true, message: '請(qǐng)輸入身份證號(hào)', trigger: 'blur' }, { min: 15, max: 18, message: '請(qǐng)如實(shí)填寫18位號(hào)碼,以供學(xué)校保衛(wèi)科核對(duì)', trigger: 'blur' }, { required: true, pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '請(qǐng)輸入正確的身份證號(hào)碼', trigger: 'blur' } ] } } }
其中對(duì)于有些需要自定義的校驗(yàn)規(guī)則可以作為變量寫在data中:
data() { let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/ var validateNewPwd = (rule, value, callback) => { if (!reg.test(value)) { callback(new Error('密碼應(yīng)是6-12位數(shù)字、字母或字符!')) } else if (this.form.oldPasswd === value) { callback(new Error('新密碼與舊密碼不可一致!')) } else { callback() } } var validateComfirmPwd = (rule, value, callback) => { if (!reg.test(value)) { callback(new Error('密碼應(yīng)是6-12位數(shù)字、字母或字符!')) } else if (this.form.newPasswd !== value) { callback(new Error('確認(rèn)密碼與新密碼不一致!')) } else { callback() } } return { form: { newPasswd: '', comfirmPwd: '' }, rules: { newPasswd: [ { required: true, message: '請(qǐng)輸入新密碼', trigger: 'blur' }, { validator: validateNewPwd, trigger: 'blur' } ], comfirmPwd: [ { required: true, message: '請(qǐng)輸入確認(rèn)密碼', trigger: 'blur' }, { validator: validateComfirmPwd, trigger: 'blur' } ] } } }
比較適用于表單全部字段校驗(yàn)或需要校驗(yàn)字段類型比較簡(jiǎn)單的數(shù)據(jù)類型
第二種方式:在el-form-item單個(gè)添加
<el-form-item label="電話號(hào)碼" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '請(qǐng)輸入電話號(hào)碼', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '請(qǐng)輸入正確的電話號(hào)碼', trigger: 'blur' }]"> <el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input> </el-form-item>
這種方式適用于需要個(gè)別檢驗(yàn)的字段,或者表單字段有變動(dòng)的校驗(yàn);
第三種方式:動(dòng)態(tài)增減表單項(xiàng)
先看需求效果圖
對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu):
對(duì)應(yīng)刪除增加表單項(xiàng)的操作為:
addPhone() { let len = this.formData.phoneInfoList.length this.$set(this.formData.phoneInfoList, len, { relation: [], phoneNum: '', relationType: 0, schoolId: this.selectedUser.schoolId, userCode: this.selectedUser.userCode }) }, deletePhone(item) { if (this.formData.phoneInfoList.length > 1) { // 表示先獲取這個(gè)元素的下標(biāo),然后從這個(gè)下標(biāo)開始計(jì)算,刪除長(zhǎng)度為1的元素 this.formData.phoneInfoList.splice(this.formData.phoneInfoList.indexOf(item), 1); } else { this.$vux.toast.text('至少保留一個(gè)家長(zhǎng)親情號(hào)碼!') return false } },
這樣的rule、prop直接寫就對(duì)應(yīng)不上表單mode綁定的對(duì)象上的屬性,所以在此要用循環(huán)的方式找到要校驗(yàn)的字段所在數(shù)據(jù)中的索引,然后再以字符串拼接的方式連上校驗(yàn)字段名稱:
渲染出來(lái)的html為:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章名稱:詳解element-ui中表單驗(yàn)證的三種方式
網(wǎng)頁(yè)鏈接:http://muchs.cn/article42/jepoec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、自適應(yīng)網(wǎng)站、網(wǎng)站收錄、品牌網(wǎng)站制作、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)