Vue自定义表单内容检查rules实例


Posted in Javascript onOctober 30, 2020

先看个例子

组件

<el-form-item label="手机号:" prop="phone_number">
 <el-input v-model="formPerson.phone_number"></el-input>
</el-form-item>

script中

export default {
 data() {
  var validateMobilePhone = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('负责人手机号不可为空'));
   } else {
    if (value !== '') {
    var reg = /^1[3456789]\d{9}$/;
    if (!reg.test(value)) {
     callback(new Error('请输入有效的手机号码'));
    } else {
     callback();
    }
    }
   }
  };
 
  return{
   formPerson: {
    phone_number: '',
   },
   rules: {
    phone_number: [
    {validator: validateMobilePhone, trigger: 'blur'}
    ]
   },
  }
 }
}

遇到的坑

在组件中【开始写的时候prop自定的名字】

<el-form-item label="手机号:" prop="phone">
 <el-input v-model="formPerson.phone_number"></el-input>
</el-form-item>

rules中

rules: {
 phone: [
 {validator: validateMobilePhone, trigger: 'blur'}
 ]
}

碰到的坑

当输入正确的手机号时,显示为错误,发现value并没有传过来,为undefined

解决:

prop写成和数据中的参数的名称一样,即phone_number

补充知识:用vue自定义指令v-validated写一个全局表单验证

由于不想在单vue文件里用blur等等设置表单验证并显示验证失败的信息,因此思考并封装了一个全局自定义指令。

献上我的代码。

html

<div class="form-section">
    <p>First Name</p>
    <input type="text" v-model='form.username' v-validated:username="['username',form.username]" placeholder="" >
    <div class="error"></div>
   </div>
    <div class="form-section">
    <p>Last Name</p>
    <input type="text" v-model='form.secondname' placeholder="">
    <div class="error"></div>
   </div>
   <div class="form-section">
    <p>Email</p>
    <input type="email" v-model='form.email' v-validated:email="['email',form.email]" placeholder="">
    <div class="error"></div>
   </div>
   <div class="form-section">
    <p>Password</p>
    <input type="password" v-model='form.password' v-validated:password="['password',form.password]" autocomplete placeholder="">
    <div class="error"></div>
   </div>

在input上挂载v-validated指令,向指令传输 ‘username'的校验类型,和form.username的校验数据。

现在封装v-validated指令

validated.js

import Vue from 'vue'
/**
 * 校验失败
*/
function testError (el) {
 el.style.borderColor = '#d20000'
 el.style.backgroundColor = '#fff8f8'
}
/**
 * 校验成功
*/
function testCorrect (el) {
 el.style.borderColor = '#a3a3a3'
 el.nextElementSibling.innerHTML = ''
 el.style.backgroundColor = 'transparent'
}
/**
 * 校验用户名
 * */
function testUserName (username, el) {
 if (/^\w{3,30}$/g.test(username)) {
  testCorrect(el)
  return true
 } else {
  testError(el)
  el.nextElementSibling.innerHTML = 'Username must be 3 to 30 characters'
  return false
 }
}
/**
 * 校验邮箱
 * */
function testEmail (email, el) {
 if (/^[\w-]+@[\w-]+(\.[\w-]+)+$/g.test(email)) {
  testCorrect(el)
  return true
 } else {
  testError(el)
  el.nextElementSibling.innerHTML = 'Mailbox format is not correct!'
  return false
 }
}
/**
 * 校验密码
 * */
function testPwd (pwd, el) {
 if (/^\w{6,30}$/g.test(pwd)) {
  testCorrect(el)
  return true
 } else {
  testError(el)
  el.nextElementSibling.innerHTML = 'Password must be 6 to 30 characters'
  return false
 }
}

Vue.directive('validated', {
 inserted (el, binding) { // 绑定元素插入父节点时调用
  el.addEventListener('blur', () => {
   switch (binding.value[0]) {
    case 'username' : testUserName(binding.def[binding.rawName], el); break
    case 'email' : testEmail(binding.def[binding.rawName], el); break
    case 'password' : testPwd(binding.def[binding.rawName], el); break
   }
  })
 },
 update: function (el, binding, vNode) { // 更新元素信息时调用
  binding.def[binding.rawName] = binding.value[1]
 }
})
export default {
 init () {
  console.log('*** validated installed ***')
 }
}

由于没有找到官方钩子之间传递数据的方法,所以自己看着用binding.def下定义updated来作为传递数据,

inserted是节点插入时就调用一次。在这里做元素blur的监听,动态数据由update刷新。

修正:我只定义一个updated会出现多个更新数据共用一个参数名,导致数据错乱。

所以我用binding.rawName做指针,放入binding.def下,实现一个页面多个数据多个处理,因为update钩子是页面上的任意改动都会触发,而不是当前挂载指令的dom对象变化才会跟着变化。

最后将这个文件放入main.js

main.js

import validated from '@/dorajs/validated.js'

Vue.use(validated)

效果如下

Vue自定义表单内容检查rules实例

Vue自定义表单内容检查rules实例

Vue自定义表单内容检查rules实例

完美解决!

以上这篇Vue自定义表单内容检查rules实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
探索node之事件循环的实现
Oct 30 #Javascript
使用TS来编写express服务器的方法步骤
Oct 29 #Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 #Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 #Javascript
使用jQuery实现购物车
Oct 29 #jQuery
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 #Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
pywinauto自动化操作记事本
2019/08/26 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
详解Python实现进度条的4种方式
2020/01/15 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
供电工程专业求职信
2014/08/09 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
统计员岗位职责
2015/02/11 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书