VeeValidate cdn extend
时间: 2023-07-25 11:21:08 浏览: 86
VeeValidate在vue项目里表单校验应用案例
使用 VeeValidate 的 CDN 版本进行验证规则的扩展也是可以的。可以通过 VeeValidate 的 `extend` 函数来添加自定义的验证规则或修改已有的验证规则的默认配置。
以下是一个添加自定义验证规则的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VeeValidate CDN 示例</title>
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/vee-validate@4.5.1"></script>
<script>
// 添加自定义验证规则
VeeValidate.extend('even', {
validate: value => {
return value % 2 === 0;
},
message: '请输入偶数'
});
new Vue({
el: '#app',
data: {
number: ''
}
});
</script>
</head>
<body>
<div id="app">
<form>
<div>
<label>数字</label>
<input type="number" v-model="number" v-validate="'even'" />
<span>{{ errors.first('number') }}</span>
</div>
</form>
</div>
</body>
</html>
```
在上面的代码中,我们在引入 VeeValidate 的 CDN 后,使用 `VeeValidate.extend()` 方法添加了一个名为 `'even'` 的自定义验证规则。然后,我们在模板中使用 `v-validate` 指令来绑定该自定义规则。
需要注意的是,在使用 CDN 版本的 VeeValidate 时,需要在使用 `extend` 函数之前先加载 VeeValidate 库。同时,由于 VeeValidate 依赖于 Vue,因此也需要先加载 Vue 库。
阅读全文