欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-04 15:18:34
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项 ......
<!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>