在開始之前需要把element-ui在vue中引入好号显，如果沒(méi)有引入好的話，需要先跟著element-ui的文檔進(jìn)行操作，接下來(lái)就可以進(jìn)行學(xué)習(xí)了涩赢。
第一種：在el-form-item單個(gè)添加驗(yàn)證
這種方式適用于需要個(gè)別檢驗(yàn)的字段，或者表單字段有變動(dòng)的校驗(yàn)轩勘；
做法：需要在el-form-item標(biāo)簽中加入 :rules=''直接是驗(yàn)證的條件 ''
下面舉個(gè)例子（驗(yàn)證用戶名 不能為空）
<el-form-item label="用戶名" :prop="userName" :rules="[{ required: true, message: '請(qǐng)輸入用戶名', trigger: 'blur' }]">
<el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>
案例樣圖
第二種：在表單上加多個(gè)驗(yàn)證
這種方式適用于表單全部字段校驗(yàn)或需要校驗(yàn)字段類型比較簡(jiǎn)單的數(shù)據(jù)類型
做法：需要在el-form-item標(biāo)簽中加入 :rules=''rules '' 筒扒，然后在data()中寫入rule{添加每個(gè)表單的驗(yàn)證}
下面舉個(gè)例子（驗(yàn)證用戶名和密碼 不能為空）
<el-form :model="formData" :rules="dateRule" ref="form">
<el-form-item label="用戶名" prop="userName">
<el-input v-model="formData.userName" type="password" placeholder="請(qǐng)輸入用戶名" clearable></el-input>
</el-form-item>
<el-form-item label="密碼" prop="userPass">
<el-input v-model="formData.userPass" :maxlength="18" placeholder="請(qǐng)輸入密碼" clearable></el-input>
</el-form-item>
</el-form>
data中
rule: {
userName: loginName: [
{ required: true, message: "用戶名不能為空", trigger: "blur" }
],
userPass: [
{ required: true, message: "密碼不能為空", trigger: "blur" }
]
}
案例樣圖
我這兩個(gè)都只簡(jiǎn)單了做了不為空的驗(yàn)證，還可以加其他的驗(yàn)證噢(如下)
最基礎(chǔ)的驗(yàn)證
{ required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' },//不能為空
{ min: 2, max: 10, message: '長(zhǎng)度在 2 到 10 個(gè)字符', trigger: 'blur' },//長(zhǎng)度
{ required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: '姓名不支持特殊字符',
trigger: 'blur' }//正則
在data中定義一些自定義的驗(yàn)證
data() {
let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
var newPass= (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()
}
}
}
return {
form: {
newPasswd: ''
},
rules: {
newPasswd: [
{ required: true, message: '請(qǐng)輸入新密碼', trigger: 'blur' },
{ validator: newPass, trigger: 'blur' }
]
}
}
}
/**
- 參數(shù) item
- required true 必填項(xiàng)
- maxLength 字符串的最大長(zhǎng)度
- min 和 max 必須同時(shí)給 min < max type=number
- type 手機(jī)號(hào) mobile
- 郵箱 email
- 網(wǎng)址 url
- 各種自定義類型 定義在 src/utils/validate 中 持續(xù)添加中.......
- */
