Vuelidate
Vuelidate是一款簡單輕量級的基于模塊的Vue.js驗證插件廓块。
安裝
安裝很簡單，用npm來安裝只需要一句話：
npm install vuelidate --save
npm i -S vuelidate //簡寫
使用
在main.js中導(dǎo)入庫并用作Vue插件剑肯，以便在包含驗證配置的所有組件上全局啟用該功能：
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)//安裝插件
內(nèi)置驗證規(guī)則
- required: 需要非空數(shù)據(jù)。檢查僅包含空格的空數(shù)組和字符串观堂。
- maxLength:要求輸入具有最大指定長度（包括最大值）让网。適用于數(shù)組。
- minLength:要求輸入具有最小指定長度（包括最小值）师痕。適用于數(shù)組溃睹。
- email: 接受有效的電子郵件地址。請記住七兜，您仍然需要在服務(wù)器上進(jìn)行仔細(xì)驗證丸凭，因為無法發(fā)送驗證電子郵件地址是否是真實的福扬。
- between: 檢查數(shù)字或日期是否在指定范圍內(nèi)腕铸。最小值和最大值都包括在內(nèi)。
- ipAddress: 接受點分十進(jìn)制表示形式的有效IPv4地址铛碑，如127.0.0.1狠裹。
- alpha: 只接受字母字符。
- alphaNum: 只接受字母數(shù)字汽烦。
- numeric: 只接受數(shù)字涛菠。
- sameAs: 檢查給定屬性是否相等。
- url: 只接受網(wǎng)址撇吞。
- or: 當(dāng)至少有一個提供的驗證器通過時通過俗冻。
- and: 所有提供的驗證器都通過時通過。
- requiredIf: 僅當(dāng)提供的屬性或謂詞為真時才需要非空數(shù)據(jù)牍颈。
- requiredUnless: 僅當(dāng)提供的屬性或謂詞為假時才需要非空數(shù)據(jù)迄薄。
- minValue: 要求輸入具有指定的最小數(shù)值或日期。
- maxValue: 要求輸入具有指定的最大數(shù)值或日期煮岁。
自定義驗證規(guī)則（Custom Validators）
除了使用Vuelidate自帶的內(nèi)置驗證規(guī)則外還可以使用自定義規(guī)則滿足需求讥蔽。
最簡單的方法就是直接在當(dāng)前文件的script里面設(shè)置校驗規(guī)則，當(dāng)然也可以單獨的寫一個my-validators.js的文件画机，無論是單獨寫還是抽離出來都需要引入.詳情請參考 vuelidate的自定義驗證規(guī)則
import { regex } from 'vuelidate/lib/validators/common'
或者
import { helpers } from 'vuelidate/lib/validators'
例子：
register.vue
//1. 先引入需要用到的驗證規(guī)則
import { required, maxLength, sameAs } from 'vuelidate/lib/validators'
import { regex } from 'vuelidate/lib/validators/common'
var phone = regex('phoneNumber', /^1(3|4|5|7|8)\d{9}$/) // 手機號碼校驗
export default {
data () {
return {
user: {
username: '',
password: '',
confirmPassword: '',
phone: '',
phoneCode: ''
}
}
},
// 2.定義驗證字段的規(guī)則
validations: {
user: {
username: {
required,
// minLength: minLength(2),
maxLength: maxLength(20),
async isUnique (value) { // 異步校驗用戶名是否已注冊
if (value === '') return true
const response = await fetch(`/api/unique/name/${value}`)
return Boolean(await response.json())
}
},
password: {
required
},
confirmPassword: {
sameAsPassword: sameAs('password') // 校驗密碼是否一致
},
phone: {
required,
phone // 直接就是用的上面const設(shè)置的校驗規(guī)則冶伞，自定義校驗
},
phoneCode: {
required
}
}
}
}
register.vue的html部分
<div :class="{ 'form-group--error': $v.user.password.$error }" >
<input v-model.trim="$v.user.password.$model"
@blur="$v.user.password.$touch()" class="input-line"
type="password"
placeholder="請設(shè)置密碼">
<span class="form-group__message" v-if="!$v.user.password.required">密碼不能為空</span>
</div>
<div :class="{ 'form-group--error': $v.user.confirmPassword.$error }">
<input v-model.trim="$v.user.confirmPassword.$model"
class="input-line" type="password"
placeholder="請確認(rèn)密碼">
<span class="form-group__message"
v-if="!$v.user.confirmPassword.sameAsPassword">兩次輸入的密碼不一致</span>
</div>
<div :class="{ 'form-group--error': $v.user.phone.$error }">
<input v-model.trim="$v.user.phone.$model"
@blur="$v.user.phone.$touch()" class="input-line"
placeholder="請輸入手機號碼">
<span class="form-group__message" v-if="!$v.user.phone.required">手機號碼不能為空</span>
<span class="form-group__message" v-if="!$v.user.phone.phone">請輸入正確的手機號碼</span>
</div>
Register.vue的css部分
/* 表單驗證樣式 */
.form-group__message{
display: none;
font-size: 12px;
color: #CC3333;
}
.form-group--error > input + .form-group__message {
display: block;
color: #CC3333;
}
.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
border-color: #CC3333;
}
