本文主要是介绍数据效验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
vee-validate
一定要在data中声明变量才有效果
gitHub以及官网
gitHub地址-----------
官网----------------------
npm install vee-validate
npm install vee-validate
使用
components: {ValidationProvider
}import { ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";extend("length", {validate(value) {return value.length === 11;},message: "客官,您输入的长度有误", // 错误信息显示
});extend("required", { ...required, message: "客官,留下您的联系方式" });extend("phone", {validate(value) {return /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(value);},message: "客官,您输入的格式不正确",
});// 用 ValidationProvider 组件包裹要表单校验的 表单项
<ValidationProvider v-slot="{ errors }" rules="required|length|phone"><label>手机号:</label><input type="text" placeholder="请输入你的手机号" v-model="phone" /><span class="error-msg">{{ errors[0] }}</span>
</ValidationProvider>
检查规则
. 使用检验规则- 自定义规则extend("length", {validate(value) {return value.length === 11;},message: "长度必须为11位", // 错误信息});- 内置规则import { required, email } from 'vee-validate/dist/rules';extend("required", {...required,message: "手机号必须要填写", // 错误信息});
这篇关于数据效验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!