element vue validate驗證名稱重複輸入框與後臺重複驗證特殊字符字符長度及注意事項

時間 2019-11-10

標籤 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>