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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php支付宝接口用法分析
2015/01/04 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue插槽slot的理解和使用方法
2019/04/03 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python的print用法示例
2014/02/11 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
温馨提示标语
2014/06/26 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python