<!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">

</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>

element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项的更多相关文章

  1. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  2. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  3. element+vue点击新增表格内在已有数据添加一行带输入框内容

    在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...

  4. Vue项目之实现登录功能的表单验证！

    Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...

  5. Jquery Validate自定义验证规则，一个汉字等于两个字符长度

    使用Jquery validate时写的一些东西,在这里做个笔记 在使用 Jquery validate 的minlength和maxlength进行文本框内容长度验证的时候,对于一个汉字的长度检测结 ...

  6. Element Vue 开箱即用框架如何使用-测试开发【提测平台】阶段小结(二)

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 上一篇总结了后端服务接口的开发,这篇我们主要来总结下前后端分离开发中的前端部分,主要是开箱即用的框架介绍和之前章节组件的梳理和部分的扩展内 ...

  7. Yii2 关闭和打开csrf 验证 防止表单多次重复提交

    原文地址:http://blog.csdn.net/terry_water/article/details/52221007 1.在Yii2配置中配置所有:所有的controller都将关闭csrf验 ...

  8. jquery validate 在ajax提交表单下的验证方法

    $(function() {  var method='${method }';  if(method == 'edit'){   url="${ctx}/commodity/typeReN ...

  9. 15：element/Vue Admin

    1.1 简介 1.Vue Admin 简介 1. Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstra ...

随机推荐

  1. JavaPoet开源项目的使用

    一.介绍 JavaPoet项目可以动态的生成Java文件,这是一个很强大和很动态的方法,使用注解的时候假如需要生成新的Java文件就可以通过这个开源项目实现. 项目地址:https://github. ...

  2. 排序函数 sort() 和 高阶函数sorted()

    · sorted():该函数第一个参数iterable为任意可以迭代的对象,key是用于比较的关键字,reverse表示排序结果是否反转. · L.sort():该函数的三个参数和 sorted() ...

  3. Python - 使用pycallgraph生成函数关系图

    1- pycallgraph简介 可用于创建python函数关系图,依赖于dot命令,需要先安装 graphviz: HomePage:http://pycallgraph.slowchop.com/ ...

  4. Vue 加载外部js文件

    Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...

  5. python高级-深浅拷贝(16)

    一.浅拷贝 浅拷贝是对一个对象的顶层拷贝,通俗地讲就是:拷贝了引用,并没有拷贝内容. a = [1,2,3] print(id(a)) b=a print(b) print(id(b)) a.appe ...

  6. [原创]CobaltStrike & Metasploit Shellcode一键免杀工具

    CobaltStrike & Metasploit  Shellcode一键免杀工具 作者: K8哥哥 图片 1个月前该工具生成的exe免杀所有杀软,现在未测应该还能过90%的杀软吧. 可选. ...

  7. app 压力测试

    monkey工具详解 https://blog.csdn.net/jffhy2017/article/details/54572400 ----------------------- Android ...

  8. Chapter 4 Invitations——9

    I didn't want to get into the safety hazards that dancing presented, so I quickly made new plans. 我不 ...

  9. java设计模式之——工厂模式

    对于java的设计模式,我还是第一次认认真真的总结,以前用的时候都不曾留意细节,现在回头再看只知道该怎么设计,却忘记当时为嘛要用它了, 所以这次就做一个demo来再次复习总结一下,希望从中能学到新体悟 ...

  10. 【EF6学习笔记】（三）排序、过滤查询及分页

    本篇原文地址:Sorting, Filtering, and Paging 说明:学习笔记参考原文中的流程,为了增加实际操作性,并能够深入理解,部分地方根据实际情况做了一些调整:并且根据自己的理解做了 ...