<!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. 客户端ip获取蹲坑启示： 不要侥幸

    怎么获取一个客户端ip ? 我想这个问题,在网上遍地都是答案! 而且多半是像下面这样: public static String getIpAddress(HttpServletRequest req ...

  2. 使用webmagic爬虫对百度百科进行简单的爬取

    分析要爬取的网页源码: 1.打开要分析的网页,查看源代码,找到要爬取的内容: (选择网页里的一部分右击审查元素也行) 2.导入jar包,这个就直接去网上下吧: 3.写爬虫: package com.g ...

  3. python 中argparse 实例解析

    一 概念: argparse是python的一个命令行解析包.它可以使写用户友好的命令行接口变得非常容易.该模块定义什么参数是需要的,并且能指出怎么解析sys.argv的参数.它也可以自动的生成帮助和 ...

  4. java中Base64的加密工具封装

    Base64加密作为最简单普遍的加密方式(其实只能称为编码方式),应用场景众多比如秘钥,安全证书,也应用在其他的加密方式中或与其他加密方式进行嵌套使用 可以通过引用sun.misc来使用,也可以自己手 ...

  5. 五分钟了解node，cnpm和yarn

    1.静态网页和动态网页 动态网页:数据可以进行交互,动态改变数据 2.node node是基于chrome的V8引擎的javascript的运行环境,node中的事件机制以及非阻塞式的I/O式模式,使 ...

  6. php安装xunserch

    xunserch的安装步骤 注意:xunserch只能在linux下使用 1.安装依赖工具 yum install make gcc g++ gcc-c++ libtool autoconf auto ...

  7. mysql 开发进阶篇系列 54 权限与安全(账号管理的各种权限操作 下)

    1. 查看权限 -- 如果host值不是%, 就要加上host值,下面查看bkpuser用户权限(6个权限, 限本地连接) SHOW GRANTS FOR bkpuser@localhost; -- ...

  8. C++版 - LeetCode 145: Binary Tree Postorder Traversal(二叉树的后序遍历，迭代法)

    145. Binary Tree Postorder Traversal Total Submissions: 271797 Difficulty: Hard 提交网址: https://leetco ...

  9. MaskRCNN-Keypoints

    这个月先写一篇吧,后面要复习数学考试了,可能到时候就忘了.今天写一个比较有意思的东西,关于人体的分割与姿态估计.如下图所示: 图片选自mask rcnn的论文,这里由于时间的关系,就不多叙述技术细节了 ...

  10. PYTHON 中 SQL 带参数

    使用 PYTHON 的字符串填充方式 import mysql.connector sql = 'select \* from school.student where age > {age} ...