Vue>>>iView>>>rule>>>校验字段(手机号&邮箱)——一蓑烟雨任平生

vue中iview组件实现表单数据的动态校验 vue实现表单数据的动态校验 阅读详情

老规矩,记录代码,废话不多说,直接看代码

第一步

<Form ref="formValidate" :model="tableData" :label-width="150" :rules="ruleValidate">

ref : 表格(方便后面提交整体校验)
:model : 实体类
:rules :校验规则

第二步

<Col span="8">
                  <FormItem label="手机号:" prop="mobile">
                    <Input
                      type="text"
                      v-model="tableData.mobile"
                      :maxlength="20"
                    ></Input>
                  </FormItem>
                </Col>

prop : 关联校验字段(后期js里面需要对应)

第三步

return {
      ruleValidate: {
        companyName: [
          {
            required: true,
            message: '公司名称不可以为空'
          }
        ],
        mobile: [
          {validator: checkPhone, trigger: 'blur'},
          {type: 'number',message:"必须数字"}
          //多个条件,多个{}进行分开
        ],
        //跟下面那个等价<!--iview自定义验证-->
        email: [{validator: validateEmail, trigger: 'blur'}]
        //<!--iview自带email验证-->
        email: [{
          type: 'email',
          message: '请输入正确的邮箱',
          trigger: 'blur'
        }]
      }
      }

required : 必填
validator : 验证规则
type : 可输入类型
blur : input框 change 下拉框

第四步

//校验手机号
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };

    //校验邮箱
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请正确填写邮箱'));
      } else {
        if (value !== '') {
          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (!reg.test(value)) {
            callback(new Error('请输入有效的邮箱'));
          }
        }
        callback();
      }
    };

校验规则

清空验证

this.$refs['formValidate'].resetFields();

最终验证

this.$refs['formValidate'].validate(val => {
        if (val) {
        }
    })

注意事项

一定要定义字段!定义字段!定义字段!
 tableData: {
        loginName: '',
        displayName: '',
        enableFlag: '',
        mobile: '',
        email: '',
        mainAccountFlag: '',
        unitName: '',
        endDate: ''
      },
c语言国际象棋(easyx图形库) c语言实现的国际象棋,先放源码,有空再更 所有图形资源均来源于网络,侵删 #include &lt;graphics.h&gt; #include&lt;stdio.h&gt; #include&lt;conio.h&gt; #include&lt;math.h&gt; #include&lt;stdlib.h&gt; #include &lt;time.h&gt; #define HEIGHT 800 #define WIDTH 1100 #define SIZE 100 #define true. 阅读详情

相关推荐

UE5网络模块实战:属性复制、RPC与联机开发踩坑指南

多人联机开发中,网络同步是核心难题。UE5网络模块以服务器权威为基础,通过Actor复制、RPC和所有权机制实现多端状态一致。理解属性复制与OnRep回调、区分Server/Client/Multicast RPC的适用场景,是构建稳定联机架构的关键。本文结合数字孪生与多端协作场景,探讨如何将渲染与逻辑分离,并针对打包后网络失效、端口防火墙、崩溃排查等工程实践问题给出解决方案。通过蓝图接口解耦表现层,利用C++创建StaticMesh组件实现服务器逻辑与客户端表现分离,同时注意专用服务器不加载渲染依赖(如D

weixin_29010003的博客 269

Iview 表单验证的规则总结

参考文档: https://github.com/yiminghe/async-validator 1. 支持的基本类型 &lt;FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',min:...

赵树祥的博客 2万+

量子计算入门指南:密度算符的核心概念与应用解析

本文深入解析了量子计算中密度算符的核心概念与应用。作为描述量子系统“状态的状态”的关键数学工具,密度算符能有效处理混合态与子系统描述,是理解量子噪声、量子纠错和开放系统演化的基石。文章通过对比纯态与混合态,阐释了密度矩阵的数学定义与物理意义,并结合代码示例演示了其在实际量子计算问题中的强大威力。

day7的博客 469

iview表单rules验证有内容但是报了校验的错误

在vue项目入引入了iview,使用Form表单的rules校验 设置的model和rules值都是对的 但是依然会报错 校验代码如下: weight:[{ { required:true, message:"重量不能为空",trigger:'blur'} }] 一开始很疑惑,因为对比了规则都是没问题的,但是最后发现 rulesObj:{ weight:"", //string 类型 } 但是我们 v-model="rulesObj.weight " 传进来...

Lucky_bo的专栏 2566

手把手教你给STM32F103移植LVGL触摸驱动(基于野火开发板,附完整代码)

本文详细介绍了如何在野火STM32F103开发板上移植LVGL触摸驱动,提供从环境准备到代码实现的完整指南。通过XPT2046触摸芯片的底层驱动集成和LVGL输入设备接口配置,开发者可以快速实现触摸功能,并解决常见问题如触摸无响应、坐标偏移等。

weixin_30856725的博客 1021

5个必知的脑网络图论指标:从聚类系数到小世界特性(附BCT工具包使用指南)

本文深度解析脑网络图论分析中五个核心指标:聚类系数、特征路径长度、全局效率、局部效率及节点效率,并详解其计算与解读。结合Brain Connectivity Toolbox工具包,提供从实战计算、常见报错解决到小世界特性统计检验的完整指南,帮助研究者跨越理论与实操鸿沟,让连接矩阵数据真正服务于神经科学研究。

blue42的博客 925

iview form rules添加校验问题

然而,在多次测试后发现,这个this一直是第一次获取到的那个this,内部所有的值都没有跟据组件内的变化而变化,也就是说,validator第一次拿到this之后,就固化下来了。我不清楚是什么原因导致的,后来的解决方案是将validator函数写在js文件中,把原本作为对象引入的twoValidate修改为函数,在组件中通过call绑定this调用,目前测试下来没有发现问题。在formData中相应startTime符合条件的情况下,仍然提示‘结束时间不能小于开始时间’,代码如下图所示。

xiaowu0929的博客 824

图数据挖掘 ECC K-core core number truss number clique

K-core:什么叫k-core,给定一个正整数k(k&gt;=0),k-core是一个G的最大子图(也就是说k-core是一个图的限制),将这个子图定义为Hk,对于Hk中的每个顶点v,他的度数都是大于等于k的。 k-core是内嵌的,如下图所示,集合{ABCD}是H3,也就是3-core的子图。而集合{ABCDE}是H2,也就是2-core的子图,集合{ABCDEGF}是H1,也就是1-core的子图,而从集合的角度来讲H3&lt;H2&lt;H1。 core number:什么叫kcor

weixin_45193103的博客 1684

iView表单验证

首先对我是用的环境进行一下说明: vue-cli + iview; 安装好 iview 组件库,然后引入,具体就不再赘述,可以看我的另一篇博客; Form表单的使用: 绑定数据 // 接受数据的对象 data(){ return{ userInfo: { username: '', password: '', captcha: ''...

任重道远 1万+

基于STM32的HC-SR04超声波模块测距(新手级)

本人是嵌入式新手,学习了STM32的部分内容,最近想找些项目做,然后顺便学习了一下HC-SR04超声波模块,学习过程中也参考了一些大佬的文章。本文记录了自己的学习方法和学习过程,同时也希望能和各位大佬交流讨论。

weixin_63758495的博客 2203

LAMMPS实操系列(四): 高熵合金FCC-CoCrCuFeNi的退火模拟

我们对FCC-CoCrCuFeNi的退火模拟思路主要是,首先将材料以均匀的速率用100 ps从300 K升温至1000 K,然后在1000 K的温度下平衡100 ps,随后以均匀的速率用100 ps从1000 K降温至300 K,随后通过共轭梯度下降法做静力学结构优化得到退火后的结构。由于FCC-CoCrCuFeNi高熵合金被认为是潜在的工程结构材料[1],接下来我们将对退火前后的结构进行压缩模拟,对比退火前后FCC-CoCrCuFeNi高熵合金的力学性能变化,敬请各位读者关注我们的更新。

Ceshigo_CD的博客 4836

iview Form表单校验自定义校验

Form 组件基于 async-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 下面是完整代码: &lt;template&gt; &lt;Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"&gt; &lt;FormItem label="Name" prop=.

qq_37496470的博客 2118

PHM 2010数据集解读

PHM数据挑战赛是一项面向所有潜在与会者的竞赛。今年的挑战集中在使用测力仪、加速度计和声发射数据估计高速数控铣床刀具的RUL上。 博客对PHM 2010数据集的组成和信号进行了可视化。

cnjs1994的博客 7647

iView中表单(动态)Form的校验

iview 动态表单校验

k0933的博客 3200

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = &quot;R. B. Palm&quot;, title = &quot;Prediction as a candidate for learning deep hierarchical models of data&quot;, year = &quot;2012&quot;,}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er&lt;0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er &lt; 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free &quot;Bitdeli Badge&quot;)

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

vue中,通过正则校验 手机号码格式

【代码】vue中,通过正则校验 手机号码格式。

Missbelover的博客 4924

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

iview - 自定义表单验证

自定义表单验证代码 export default { data () { const validateImage = (rule, value, callback) =&gt; { if (value.barImage === '') { callback(new Error('验证错误')) } else if (value.split('...

idomyway的博客 1035

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验

前端轮子

weixin_42125732的博客 1万+

iview>Form表单电话/邮箱正则校验,开箱即用!

【代码】iview>Form表单电话/邮箱正则校验,开箱即用!

m0_65678046的博客 379

Vue正则验证:邮箱,手机号,身份证,IP,MAC,微信号等

【代码】Vue正则验证:邮箱,手机号,身份证,IP,MAC,微信号等。

xybhua的博客 3604

iView Form 表单校验注意点

iView Form 表单校验注意点 由pinooc 2019年8月6日 设置 rules, 并制定 prop &lt;Form ref="topicForm" :model="topicForm" :rules="topicFormValidate" :label-width="80"&gt; &lt;FormItem label="名称" prop="topicName"&gt; &lt;Input type="text" v-model.

嘿嘿 1410

Vue项目中手机号码验证

输入错误的号码,弹出提示窗口!Vue项目中手机号码验证。

jolinoy的博客 1155

Vue表单中手机号校验

【代码】Vue表单中手机号校验。

weixin_56372270的博客 1485

iview rule验证

password: [{ validator: (rule, value, callback) =&gt; { if (value.trim() === '') { callback(new Error('密码不能为空')) } else if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,...

你如今的气质里,藏着你走过的路,经历过的事,读过的书,和爱过的人。 801

element 和 iView自定义表单验证规则

element 和 iView自定义表单验证规则

wendy_qx的博客 571

iview form表单验证手机号

1.直接验证,rules添加 phone: [ { required: true, message: "请输入手机号码", trigger: "blur" }, { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" } ], 2.自定义验证...

hello world 2358
上一篇: Mybatis-Plus >>>QueryWrapper>>> 去重__一蓑烟雨任平生
下一篇: Vue>>Iview>>时间不可选万能模板___一蓑烟雨任平生
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值