Vant表单验证的使用 |
您所在的位置：网站首页 › 校验码可以为0吗 › Vant表单验证的使用 |
|
文章目录
前言一、使用场景二、使用方法1. 表单校验2. 全局表单验证3. 局部表单验证
三、完整示例代码四. 总结
前言
vant表单验证在移动端开发中是必不可少的，鉴于自身对该模块不了解，特此写一篇笔记来记录我的使用方法。 一、使用场景常用于form表单中输入框组件的校验 二、使用方法 1. 表单校验1.1 用 van-form 包住 1.2 在 van-field 上要有 v-model=“变量” 和 绑定rules属性 :rules="rules变量" rules变量:[ { // 是否必填 required:true, message:错误信息, trigger:"onBlur/onChange"}, { // 自定义表单校验 validator: value => { // true:验证通过 // false:验证不通过 return boolean值 },message:"错误信息", trigger:"onBlur/onChange" } ] 2. 全局表单验证2.1 在 van-form 中定义ref属性 ref="xxx" 2.2 在触发对应事件的函数中写入以下代码 this.$refs.xxx.validate().then(()=>{ // 验证通过 }).catch(()=>{ //验证失败 }) 3. 局部表单验证3.1 在 van-form 中定义ref属性 ref="xxx" 3.2 在需要验证的项的 van-field上加上 name值 name="ooo" 3.3 在触发对应事件的函数中写入以下代码 this.$refs.xxx.validate("name的值").then(()=>{ // 验证通过 }).catch(()=>{ //验证失败 }) 三、完整示例代码 vant表单验证 发送验证码 提交 // 在 #app 标签下渲染一个按钮组件 new Vue({ el: '#app', data: { mobile: '', // 手机号码 code: '', // 验证码 // 校验手机号码 telRules: [{ required: true, message: '手机号码不能为空', trigger: 'onBlur' }, { // 自定义校验规则 validator: value => { return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/ .test(value) }, message: '请输入正确格式的手机号码', trigger: 'onBlur' }], codeRules: [{ required: true, message: '验证码不能为空', trigger: 'onBlur' }] }, methods: { getCode() { // 局部表单验证 this.$refs.form.validate('mobile').then(() => { this.$toast.success('验证码获取成功') }).catch(() => { this.$toast.fail('验证码获取失败') }) }, submit() { // 全局表单验证 this.$refs.form.validate().then(() => { this.$toast.success('提交成功') }).catch(() => { this.$toast.fail('提交失败') }) } } }); 四. 总结 属性功能注意validator自定义表单验证v-mode，绑定rulesvalidate()全局表单验证van-form加入属性ref=‘xxx’validate(‘name的值’)局部表单验证van-form添加属性ref=‘xxx’，van-field 添加属性name=‘ooo’ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |