tnblog
首页
视频
资源
登录

vue elementUI常用表单验证

6133人阅读 2021/2/18 15:02 总访问:140246 评论:0 收藏:0 手机
分类: vue前端
  1. <script>
  2.   export default {
  3.     name"form",
  4.     data() {
  5.  
  6.         //ip地址校验
  7.           var IPValidator = (rule, value, callback) => {
  8.           let ip_ip = '(25[0-5]|2[0-4]\\d|1\\d\\d|\\d\\d|\\d)';
  9.           let ip_ipdot = ip_ip + '\\.';
  10.           let isIPaddress = new RegExp('^' + ip_ipdot + ip_ipdot + ip_ipdot + ip_ip + '$');
  11.           if (value && !isIPaddress.test(value)) {
  12.             callback(new Error('IP地址格式错误'));
  13.           } else {
  14.             callback();
  15.           }
  16.         };
  17.       return {
  18.         formRules: {
  19.     name:
  20.      [{requiredtrue,message'请输入用户名',trigger'blur'},
  21.         {min2,max7,message'长度在 2 到 7 个字符'},
  22.         {pattern/^[\u4E00-\u9FA5]+$/message'用户名只能为中文'}
  23.         //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头,长度在2-5之间, 只能包含字符、数字和下划线'}],
  24.     password: 
  25.      [{requiredtrue,message'请输入密码',trigger'blur'}, 
  26. min5,max25,message'长度在 5 到 25个字符'}, 
  27. {pattern/^(\w){5,25}$/message'只能输入5-25个字母、数字、下划线'}],
  28.  phone:
  29.   [{ requiredtrue,message'请输入手机号码',trigger'blur'},
  30.      {validator:function(rule,value,callback){
  31.             if(/^1[34578]\d{9}$/.test(value) == false){
  32.                 callback(new Error("请输入正确的手机号"));
  33.             }else{
  34.                 callback();
  35.             }
  36.         }, trigger'blur'}],
  37.            //pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
  38.     peopleID:
  39.      [{requiredtrue,message'请输入身份证ID',trigger'blur'},
  40.      {pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/message'你的身份证格式不正确' }],
  41.     carId:
  42.      [{requiredtruemessage'请输入车牌号'trigger'blur'}, 
  43.        {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,message'常规格式:晋B12345'},],
  44. },
  45.         email:
  46.             [{requiredtruemessage'请输入邮箱号'trigger'blur'},
  47.              {validator:function(rule,value,callback){
  48.                 if (value === '') {
  49.                   callback(new Error('请正确填写邮箱'));
  50.                 } else {
  51.                       if (value !== '') { 
  52.                         var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  53.                           if(!reg.test(value)){
  54.                               callback(new Error('请输入有效的邮箱'));
  55.                          }
  56.               }else{
  57.                 callback();
  58.             }
  59.       }, trigger'blur'}],
  60.         port:[
  61.               {requiredtruemessage"请输入端口号"trigger'blur'},
  62.               {validator:validateNumber, trigger'blur'},
  63.             ],
  64. }
  65.     }
  66. }
  67. }
  68. </script>


评价

vue elementUI隐藏表格列。vue element-ui表格添加自增序号列

vue elementui隐藏表格列v-if就搞定了,如果不是动态的显示与隐藏直接设置成false就行 &lt;el-table-column label=&quot;...

vue elementUI,vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单,el-upload绑定一个data即可...

vue elementUI 图片预览。el-image-viewer图片查看器。修改图片预览的自带样式。点击哪一个就查看哪一个图片

先引入图片预览的组件 import ElImageViewer from &#39;element-ui/packages/image/src/image-viewer&#39; export defa...

vue elementUI 常用表格,条件查询,类型解析,弹窗显示详情,图片显示,图片预览

[TOC]第一版 页面&lt;template&gt; &lt;div class=&quot;app-container&quot;&gt; &lt;el-card&gt; &lt;!-...

vue elementUI 基础表格布局,基础表格+条件+搜索框布局类型处理,父子组件方法调用

[TOC]基础表格+条件+搜索框布局效果如下:代码如下: &lt;template&gt; &lt;div class=&quot;app-container&quot;&gt...

vue elementUI 弹窗el-dialog,自定义弹窗样式,单选按钮el-radio联动

效果如下: 代码如下: &lt;!-- 处理问题反馈使用的弹窗 --&gt; &lt;template&gt; &lt;div&gt; &lt;!-- 弹窗sta...

vue elementUI分页条使用与.net后台sqlsugar等分页方法使用。常用分页模板

分页条&lt;div style=&quot;margin-top: 20px;margin-bottom: 20px;text-align: center;&quot;&gt; &lt;el-pagination ...

vue elementUI table去掉滚动条

当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动。现在需求是右侧滚...
写代码里面打羽毛球最好的
排名
23
文章
19
粉丝
5
评论
1
Android studio打包脱坑1
剑轩 : 现在在做android了哇?
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
云想衣裳花想容,春风拂槛露华浓。