2019-11-06 18:40:18 +08:00
|
|
|
# Custom Rules
|
|
|
|
```html
|
|
|
|
<n-form :model="model" ref="form" :rules="rules">
|
|
|
|
<n-row>
|
|
|
|
<n-col :span="24">
|
|
|
|
<n-form-item path="age" label="Age">
|
|
|
|
<n-input v-model="model.age"/>
|
|
|
|
</n-form-item>
|
|
|
|
</n-col>
|
|
|
|
</n-row>
|
|
|
|
<n-row>
|
|
|
|
<n-col :span="24">
|
|
|
|
<n-form-item path="password" label="Password">
|
2019-11-07 21:35:26 +08:00
|
|
|
<n-input v-model="model.password" @input="handlePasswordInput" type="password"/>
|
2019-11-06 18:40:18 +08:00
|
|
|
</n-form-item>
|
|
|
|
</n-col>
|
|
|
|
</n-row>
|
|
|
|
<n-row>
|
|
|
|
<n-col :span="24">
|
2019-11-07 21:35:26 +08:00
|
|
|
<n-form-item
|
|
|
|
path="reenteredPassword"
|
|
|
|
label="Re-enter Password"
|
|
|
|
ref="reenteredPassword"
|
|
|
|
>
|
|
|
|
<n-input v-model="model.reenteredPassword" type="password"/>
|
2019-11-06 18:40:18 +08:00
|
|
|
</n-form-item>
|
|
|
|
</n-col>
|
|
|
|
</n-row>
|
|
|
|
<n-row :gutter="[0, 24]">
|
|
|
|
<n-col :span="24">
|
|
|
|
<div style="display: flex; justify-content: flex-end;">
|
|
|
|
<n-button @click="handleValidateButtonClick" round type="primary">Validate</n-button>
|
|
|
|
</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: [
|
|
|
|
{
|
|
|
|
validator (rule, value) {
|
2019-11-07 21:35:26 +08:00
|
|
|
return /^\d*$/.test(value)
|
2019-11-06 18:40:18 +08:00
|
|
|
},
|
2019-11-07 21:35:26 +08:00
|
|
|
message: 'Please input an integer',
|
2019-11-06 18:40:18 +08:00
|
|
|
trigger: 'input'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
validator (rule, value) {
|
|
|
|
return Number(value) > 18
|
|
|
|
},
|
2019-11-07 21:35:26 +08:00
|
|
|
message: 'Age should be above 18',
|
2019-11-06 18:40:18 +08:00
|
|
|
trigger: 'input'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
reenteredPassword: [
|
|
|
|
{
|
|
|
|
validator: this.validatePasswordStartWith,
|
|
|
|
message: 'Password is not same as re-entered password!',
|
|
|
|
trigger: 'input'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
validator: this.validatePasswordSame,
|
|
|
|
message: 'Password is not same as re-entered password!',
|
2019-11-07 21:35:26 +08:00
|
|
|
trigger: ['blur', 'password-input']
|
2019-11-06 18:40:18 +08:00
|
|
|
},
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
trigger: 'blur'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handlePasswordInput () {
|
2019-11-07 21:35:26 +08:00
|
|
|
if (this.model.reenteredPassword) {
|
|
|
|
this.$refs.reenteredPassword.validate('password-input')
|
|
|
|
}
|
2019-11-06 18:40:18 +08:00
|
|
|
},
|
|
|
|
handleValidateButtonClick (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
this.$refs.form.validate()
|
|
|
|
},
|
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|