2020-02-05 12:14:05 +08:00
|
|
|
# 自定义规则
|
|
|
|
你可以通过设定自定的 trigger 来控制验证。
|
|
|
|
```html
|
|
|
|
<n-form :model="model" ref="form" :rules="rules">
|
2020-02-05 12:48:15 +08:00
|
|
|
<n-form-item-row path="age" label="年龄">
|
2020-02-05 12:14:05 +08:00
|
|
|
<n-input v-model="model.age"/>
|
|
|
|
</n-form-item-row>
|
2020-02-05 12:48:15 +08:00
|
|
|
<n-form-item-row path="password" label="密码">
|
2020-02-05 12:14:05 +08:00
|
|
|
<n-input v-model="model.password" @input="handlePasswordInput" type="password"/>
|
|
|
|
</n-form-item-row>
|
|
|
|
<n-form-item-row
|
|
|
|
first
|
|
|
|
path="reenteredPassword"
|
2020-02-05 12:48:15 +08:00
|
|
|
label="重复密码"
|
2020-02-05 12:14:05 +08:00
|
|
|
ref="reenteredPassword"
|
|
|
|
>
|
|
|
|
<n-input :disabled="!model.password" v-model="model.reenteredPassword" type="password"/>
|
|
|
|
</n-form-item-row>
|
|
|
|
<n-row :gutter="[0, 24]">
|
|
|
|
<n-col :span="24">
|
|
|
|
<div style="display: flex; justify-content: flex-end;">
|
2020-02-05 12:48:15 +08:00
|
|
|
<n-button @click="handleValidateButtonClick" round type="primary">验证</n-button>
|
2020-02-05 12:14:05 +08:00
|
|
|
</div>
|
|
|
|
</n-col>
|
|
|
|
</n-row>
|
|
|
|
</n-form>
|
|
|
|
|
|
|
|
<pre>
|
|
|
|
{{ JSON.stringify(model, 0, 2) }}
|
|
|
|
</pre>
|
|
|
|
```
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
model: {
|
|
|
|
age: null,
|
|
|
|
password: null,
|
|
|
|
reenteredPassword: null
|
|
|
|
},
|
|
|
|
rules: {
|
|
|
|
age: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
validator (rule, value) {
|
|
|
|
if (!value) {
|
2020-02-05 12:48:15 +08:00
|
|
|
return new Error('需要年龄')
|
2020-02-05 12:14:05 +08:00
|
|
|
} else if (!/^\d*$/.test(value)) {
|
2020-02-05 12:48:15 +08:00
|
|
|
return new Error('年龄应该是个整数')
|
2020-02-05 12:14:05 +08:00
|
|
|
} else if (Number(value) < 18) {
|
2020-02-05 12:48:15 +08:00
|
|
|
return new Error('年龄应该超过十八岁')
|
2020-02-05 12:14:05 +08:00
|
|
|
}
|
|
|
|
return true
|
|
|
|
},
|
|
|
|
trigger: ['input', 'blur']
|
|
|
|
}
|
|
|
|
],
|
|
|
|
reenteredPassword: [
|
|
|
|
{
|
|
|
|
required: true,
|
2020-02-05 12:48:15 +08:00
|
|
|
message: '需要重复输入密码',
|
2020-02-05 12:14:05 +08:00
|
|
|
trigger: ['input', 'blur']
|
|
|
|
},
|
|
|
|
{
|
|
|
|
validator: this.validatePasswordStartWith,
|
2020-02-05 12:48:15 +08:00
|
|
|
message: '两次密码输入不一致',
|
2020-02-05 12:14:05 +08:00
|
|
|
trigger: 'input'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
validator: this.validatePasswordSame,
|
2020-02-05 12:48:15 +08:00
|
|
|
message: '两次密码输入不一致',
|
2020-02-05 12:14:05 +08:00
|
|
|
trigger: ['blur', 'password-input']
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handlePasswordInput () {
|
|
|
|
if (this.model.reenteredPassword) {
|
2020-02-05 12:48:15 +08:00
|
|
|
this.$refs.reenteredPassword.validate('password-input')
|
2020-02-05 12:14:05 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
handleValidateButtonClick (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
this.$refs.form.validate(errors => {
|
|
|
|
if (!errors) {
|
2020-02-05 12:48:15 +08:00
|
|
|
this.$NMessage.success('验证成功')
|
2020-02-05 12:14:05 +08:00
|
|
|
} else {
|
|
|
|
console.log(errors)
|
2020-02-05 12:48:15 +08:00
|
|
|
this.$NMessage.error('验证失败')
|
2020-02-05 12:14:05 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
validatePasswordStartWith (rule, value) {
|
|
|
|
return this.model.password && this.model.password.startsWith(value) && this.model.password.length >= value.length
|
|
|
|
},
|
|
|
|
validatePasswordSame (rule, value) {
|
|
|
|
return value === this.model.password
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|