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轻松实现Ajax的实例代码
Aug 16 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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
php连接数据库代码应用分析
2011/05/29 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python绘制彩虹图
2019/12/16 Python
python绘制封闭多边形教程
2020/02/18 Python
python性能测试工具locust的使用
2020/12/28 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
擅自离岗检讨书
2014/02/11 职场文书
自我鉴定总结
2014/03/24 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
年度考核表个人总结
2015/03/06 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers