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

时间：2022-12-19 17:18:41
<!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>

 

标签：

相关文章