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 使用手册(七)
Sep 23 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
探索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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
laravel请求参数校验方法
2019/10/10 PHP
this和执行上下文实现代码
2010/07/01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
Python模拟三级菜单效果
2017/09/11 Python
Django rest framework实现分页的示例
2018/05/24 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python 为什么说eval要慎用
2019/03/26 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pandas 层次化索引的实现方法
2019/07/06 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python实现对变位词的判断方法
2020/04/05 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
体育活动总结范文
2014/05/04 职场文书
家属慰问信
2015/02/14 职场文书
统计工作个人总结
2015/03/03 职场文书
请客吃饭开场白
2015/06/01 职场文书
保外就医申请书范文
2015/08/06 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript