vue form check 表单验证的实现代码


Posted in Javascript onDecember 09, 2018

vue-form-check  (基于vue的表单验证)具体实现代码如下所述:

安装

// 安装
npm i vue-form-check -S

引用

// 引用(eg. 在工程的main.js下)
import vueFormCheck from 'vue-form-check'
Vue.use(vueFormCheck)

调用

this.$checkForm(current, config)
@params
current 是当前校验对象
config 是校验规则对象
config.alias   别名
config.type   配置项数据类型
config.required 是否必填
config.rule   正则校验
config.depend  先决条件(省事可以在callback里直接判断,推荐写,true校验本项;false不校验本项)
config.callback 灵活校验(rule同时出现,只处理callback,参数是当前值,true校验通过;false校验不通过)
@return object 对象
不通过的话  {alias: '电话', type: 'rule'}  alias是配置的别名,type可以是['type'|'required'|'rule']
校验通过的话 {} 空对象
ps. 验证表单可以写在mixin里,这里简单处理直接写在组件里了

Component

// 使用例子
new Vue({
 data() {
  return {
   params: {
    id: '1234',
    person: {
      name: 'jackie',
      age: '27',
      phone: '18266666666',
      home: ['罗湖区田心村']
    }
   }
  }
 },
 methods: {
  submit() {
   //...
   console.log('submit success');
  },
  check() {
   let obj = this.$checkForm(this.params, {
      id: {
       alias: 'id',
       type: 'string'
      },
      // 必填校验
      'person.name': {
        alias: '学校',
        type: 'string',
        required: true
      },
      // 正则校验
      'person.phone': {
        alias: '电话',
        type: 'string',
        rule: /^1[345678][0-9]{9}$/
      },
      // 灵活校验,如数值、日期区间验证
      'person.age': {
        alias: '年龄',
        callback(value) {
          if (value < 30 && value > 18) {
            return true;
          }
          return false;
        }
      },
      // 先决校验,如果电话等于以下,校验地址信息
      'person.home': {
        alias: '方向',
        type: 'array',
        required: true,
        depend() {
          if (this.params.person.phone === '18210517463') {
           return true;
          }
          return false;
        }
     }
    });
    const length = Object.keys(obj).length;
    if (length === 0) {
      return this.submit();
    }
    switch (obj.type) {
      case 'type':
        this.$alert(`${obj.alias}的类型定义错误`, '提示');
        break;
      case 'required':
        this.$alert(`${obj.alias}是必填项`, '提示');
        break;
      case 'rule':
        this.$alert(`${obj.alias}的输入不符合规范`, '提示');
        break;
      default:
        break;
    }
  }
 }
});

补充:vue-form表单验证是否为空值

重点部分:

点击表单的 submit按钮 触发form 部分 @submit=”submit”事件:

submit事件 定义在js部分:

prevent:文档上说了在事件后面加上 .prevent就可以阻止默认事件了。

form @submit.prevent=”submit”
 <form @submit.prevent="submit">
    <input type="text" v-model="userName" placeholder="请输入你的姓名" class="name-style" maxlength="20"/>
    <div class="sex">
      <select v-model="selectedSex">
        <option>boy</option>
        <option selected = "selected">girl</option>
      </select>
    </div> 
      <input type="text" v-model="phoneNumber" placeholder="请输入你的手机号" class="phone-number-style"/>
    <div class="guide-style">
      <select v-model="selectedGuild">
        <option selected="selected" value="">请选择一个导购: </option>
        <option v-for="guild in guilds" value ="{{ guild.name }}">{{ guild.name }}</option>
      </select>
    </div>
    <input type="submit" value ="注册" class="register-style"/>
  </form> 

  data () {
    return {
    userName: '',  //请输入你的姓名
    selectedSex: '',//选择性别
    phoneNumber: '',//请输入你的手机号
    guilds: [],   
    selectedGuild: '' ///请选择一个导购
    }
  },
  methods: {

 //1.重点是这个方法 submit () {} - form @submit.prevent="submit" -重点是这个方法 submit () {},
 //2.可以在这里向服务器发送数据
   submit () {

    if (!this.userName) {
      showToast('请输入姓名!')
      return false
    }

    if (!this.phoneNumber) {
      showToast('请输入手机号码!')
      return false
    }

    if (!checkTel(this.phoneNumber)) {
      showToast('手机号格式不正确')
      return false
    }

    if (!this.selectedGuild) {
      showToast('请选择导购!')
      return false
    }

    return true
    }
  }

总结

以上所述是小编给大家介绍的vue form check 表单验证的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
异步加载script的代码
Jan 12 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
js验证账户名是否重复
May 26 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
You might like
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Pyqt5实现英文学习词典
2019/06/24 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
手机被没收检讨书
2014/02/22 职场文书
规范化管理年活动总结
2014/08/29 职场文书
音乐教师求职信范文
2015/03/20 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫