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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue实现购物车功能
Apr 27 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
ES6入门教程之let、const的使用方法
Apr 13 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
js返回顶部实例分享
2016/12/21 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
python的变量与赋值详细分析
2017/11/08 Python
Python实现DDos攻击实例详解
2019/02/02 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
幼儿园新年寄语
2014/04/03 职场文书
文明寝室标语
2014/06/13 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
入党心得体会
2019/06/20 职场文书