element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项

时间：2021-12-21 22:50:09
<!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 &&num;39&semi;validate&&num;39&semi; does not exist on type &&num;39&semi;Element &vert; Element&lbrack;&rsqb; &vert; Vue &vert; Vue&lbrack;&rsqb;&&num;39&semi;&period; Property &&num;39&semi;valid&period;&period;&period;

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

  3. element&plus;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 开箱即用框架如何使用-测试开发【提测平台】阶段小结&lpar;二&rpar;

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

  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&sol;Vue Admin

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

随机推荐

  1. Android自定义权限和使用权限

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 自定义权限,主要用于保护被赋予权限的组件.如无权限与有权限,正如public与private的对类保 ...

  2. Mac xcode 编译产生app的路径

    .../<current User>/Library/Developer/XCode/DerivedData/<Project name>-<other characte ...

  3. 成都普华永道税务开发的offer

    首先这是一个.net税务开发的offer,我是做开发的. 有没有人在成都普华永道的,最近收到普华永道的offer,如果有的话请联系我.想知道里面的情况.最想知道里面的加班情况,薪资还是有点诱惑的.毕竟 ...

  4. 设置java jvm（虚拟机） 的内存在大小

    package WanWan; public class Test { /** * @param args */ public static void main(String[] args) { // ...

  5. iOS的常见文件及程序的启动原理

    一. iOS中常见文件 (一). Xcode6之前 创建项目,默认可以看见一个存放框架的文件夹 info文件以工程文件名开头,如:第一个项目-Info.plist 项目中默认有一个PCH文件 (二). ...

  6. iOS之自定义UITabBar替换系统默认的（添加&OpenCurlyDoubleQuote;&plus;”号按钮）

    自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个“+号按钮”,下面我们来聊聊具体的实现. 1.自定义WBTabBar,让其继承自UITabBar,代码如下: // / ...

  7. 读《effective C&plus;&plus;》2

    条款03:尽可能使用const(Use const whenever possible) 1.const == 奇妙的事 const的一件奇妙的事是,他允许你定义一个约束,(告诉编译器,这是一个“不该 ...

  8. HPU--1280 Divisible

    题目描述 给定一个很大的整数,我想知道它能否被9整除. 输入 有t组测试数据,每组数据给定一个整数N不存在前导0.(1 <= t <= 20,1 <= N <= 10^200) ...

  9. Android EditText常用属性

    一.EditText介绍 ①EditText是一个输入框,在Android开发中是常用的控件.也是获取用户数据的一种方式. ②EditText是TextView的子类,它继承了TextView的所有属 ...

  10. IDEA 热部署设置（JRebel插件激活）

    参考原文链接:https://blog.csdn.net/feidi7783/article/details/80607374

相关文章