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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
微信小程序实现底部弹出模态框
Nov 18 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的博客ping服务代码
2012/02/04 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
Javascript倒计时代码
2010/08/12 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript实现密码强度显示
2015/03/18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python 内置函数汇总详解
2019/09/16 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python 列表的清空方式
2020/01/13 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
简单的辞职信范文
2014/01/18 职场文书
质量保证书范本
2014/04/29 职场文书
质量整改通知单
2015/04/21 职场文书
2015年药品销售工作总结范文
2015/05/25 职场文书