第一種常用方式：表單上加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.lengththis.$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)字段名稱：

渲染出來的html為：

總結(jié)

以上是生活随笔為你收集整理的工作187：表单校验规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。