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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 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&amp;mysql(四)
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Django实现发送邮件功能
2019/07/18 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
物理教学随笔感言
2014/02/22 职场文书
供货协议书范本
2014/04/22 职场文书
小学端午节活动总结
2015/02/11 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
计算机实训心得体会
2016/01/14 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
python开发的自动化运维工具ansible详解
2021/08/07 Python