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 相关文章推荐
学习jquery之一
Apr 27 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python中Class类用法实例分析
2015/11/12 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
详解python内置模块urllib
2020/09/09 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
银行出纳岗位职责
2013/11/25 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
作文评语大全
2014/04/23 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
党员民主评议个人总结
2014/10/20 职场文书
离婚代理词范文
2015/05/23 职场文书
全陪导游词开场白
2015/05/29 职场文书
张丽莉观后感
2015/06/16 职场文书
大学生安全教育心得体会
2016/01/15 职场文书