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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
用JavaScript实现仿Windows关机效果
Mar 10 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
深入理解js数组的sort排序
May 28 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 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
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
主治医师岗位职责
2013/12/10 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
求职自我评价参考范文
2019/05/16 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书