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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

head>
<body >
<div id="app">
    
    <el-form size="mini" :model="abc" ref="validateRef">
        
        <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>


<script src="https://unpkg.com/vue/dist/vue.js">script>

<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验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项)