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 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
javascript json 新手入门文档
2009/12/03 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js友好的时间返回函数
2016/08/24 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
js获取ip和地区
2017/03/10 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python实现批量图片格式转换
2020/06/16 Python
浅析python中的del用法
2020/09/02 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
关于保护环境的标语
2014/06/09 职场文书
岗位说明书怎么写
2014/07/30 职场文书
完整版商业计划书
2014/09/15 职场文书
办公室个人总结
2015/02/28 职场文书
销售合作意向书范本
2015/05/08 职场文书
微观世界观后感
2015/06/10 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python