element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】


Posted in Javascript onNovember 20, 2018

具体代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
</head>
<body >
<div id="app">
  <!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致-->
  <el-form size="mini" :model="abc" ref="validateRef">
    <!--此处的prop 和input 中abc的属性名称一致 -->
    <el-form-item label="你好" prop="hello" :rules="[{required: true,message:'请输入',trigger:'blur'}
                             ,{validator:validateCharacter,trigger:'blur'}
                             ,{validator:validateFontSize,trigger:'blur'}
                             ,{validator:validatePass,trigger:'blur'}]">
      <el-input type="text" v-model="abc.hello" placeholder="请输入..." clearable></el-input>
    </el-form-item>
  </el-form>
  <el-button @click="submit('validateRef')" type="primary" :loading="submitLoading">提交</el-button>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var context=[[${#request.getContextPath()}]];
  var ArrayMap = new Vue({
    el: '#app',
    data: function () {
      return {
        abc: {
          hello: '',
        },
        submitLoading:false,
      }
    },
    methods: {
      //特殊字符过滤
      checkSpecificKey(str) {
        var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“'。,、?]‘'";
        for (var i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) != -1) {
            return false;
          }
        }
        return true;
      },
      //验证字符串
      validatePass(rule,value,callback){
        var that=this;
        $.ajax({
          url:context+"/abc?name="+that.abc.hello,
          type:"GET",
          async:false,
          dataType:"json",
          contentType:"application/json;charset=UTF-8",
          data:{}
        }).done(function(resp){
          if(resp.data.isTrue){
            callback();
          }else{
            callback(new Error("名称重复,请重新输入"))
          }
        })
      },
      //验证字符串
      validateFontSize(rule,value,callback){
        if(value.length<30){
          callback();
        }else{
          callback(new Error("字符串长度在1-30之间"))
        }
      },
      //验证字符串
      validateCharacter(rule,value,callback){
        if(this.checkSpecificKey(value)){
          callback();
        }else{
          callback(new Error('请不要输入特殊字符:[`~!#$^&*()=|{}\':;\',\\[\\].<>/?~!#¥……&*()——|{}【】‘;:”“\'。,、?]‘\''))
        }
      },
      submit(data) {
        this.submitLoading=true,
        this.$refs[data].validate((valid) => {
          if (valid) {
            //验证成功,提交
            return true;
          } else {
            //验证失败返回
            return false;
          }
          ;
        })
      },
    },
  })
</script>
</body>
</html>

下面看下vue-element 输入框验证

1.控制输入位数

限制输入为10位,这种方式可以使输入框中输入10位后不能输入后续内容

因为number输入框自动将最后一位小数点忽略不计,因此“.”,"2.","3.3."这三种情况均为正确的输入

<el-form-item label="渠道:" prop="channelName">
 <el-input v-model="formData.channelName" :maxlength="10" placeholder="请输入渠道名称"></el-input>
</el-form-item>
rules:{
    channelName:[
     {required:true,message:'渠道名称不能为空',trigger:'change'},
    ],
 }

2.控制小数输入位数

input 设置类型为number,step控制步长,正则表达式匹配输入的格式必须为xxx.xxx.

注意,此种方法无法区分不输入的情况,故将提示信息合并为一个。

统一触发方式为change

<el-form-item label="短信单价:" prop="price" class="form-price">
  <el-input type="number" step="0.001" v-model="formData.price" placeholder="请输入"></el-input>
</el-form-item>
//js
  let checkPrice = (rule,value,callback)=>{
    if(value){
     let rgx = /^\d+(\.\d{1,3})?$/;
     if(value.match(rgx)==null){
      return callback(new Error('请检查输入格式,不能为空,且最多三位小数'))
     }else{
      callback();
     }
    }
   };
   rules:{
     price:[
      {required:true,message:'请检查输入格式,不能为空,且最多三位小数',trigger:'change'},
      {validator:checkPrice,trigger:'change'}
     ]
   },

3.验证时间控件选择的时间是否在某个范围

let checkSendTime = (rule, value, callback) => {
    let hour = value ? value.getHours() :0;
    if (value !== "") {
     if (hour < 8 || hour > 21) {
      return callback(new Error('请选择8:00~22:00之间发送'));
     } else {
      callback();
     }
    }
   };
   sendTime:[
      {type:'date',required: true, message: '发送时间不能为空', trigger: 'blur'},
      {validator:checkSendTime,trigger:'blur'}
     ]

总结

以上所述是小编给大家介绍的element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
javascript数组去重方法分析
Dec 15 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
一步步教你利用Docker设置Node.js
Nov 20 #Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 #Javascript
vue中的适配px2rem示例代码
Nov 19 #Javascript
JS监听事件的叠加和移除功能
Nov 19 #Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 #Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 #Javascript
You might like
PHP6 mysql连接方式说明
2009/02/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python excel转换csv代码实例
2019/08/26 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
小学班主任培训方案
2014/06/04 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python