首页VeeValidate　cdn extend

VeeValidate　cdn extend

时间: 2023-07-25 09:21:08 浏览: 88

使用 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 库。

阅读全文