碼上歡樂
相關內容    簡體    繁體

vue 表單驗證實例

本文轉載自   查看原文   2017-06-19 13:35   1251 

1.注冊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>
    <script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">
    <div class="username">
        <label for="">用戶名：</label>
        <input type="text" v-model="username" initial="off" v-validate:username="['username']" placeholder="請輸入用戶名">
        <p class="red" v-show="$validatorMethod.username.noempty">用戶名不能為空</p>
        <p class="red" v-show="$validatorMethod.username.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="password" initial="off" v-validate:password="['integer']" placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.password.integer">只能是數字</p>
    </div>
    <div class="password">
        <label for="">確認密碼：</label>
        <input type="password" v-model="newpassword" initial="off" v-validate:newpassword="{match:matchPassword}" placeholder="請輸入確認密碼">
        <p class="red" v-if="$validatorMethod.newpassword.match">確認密碼和密碼不一致</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            comment:"",
            username: "",
            password: "",
            newpassword:"",
            matchPassword:false
        },
        validators: {
            noempty:function(val){
                var reg = /^\s*$/g, isFlag = true;
                if(val == "" || reg.test(val)){
                    isFlag = false;
                }
                return  isFlag;
            },
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            },
            match:function (val,result) {
                return result;
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證目標表單元素。
                 * true:驗證所有
                 */
                self.$validate(true,function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.invalid){
                        alert("登錄成功");
                    }
                })
            }
        },
        computed:{
            matchPassword:function () {
                return this.password == this.newpassword
            }
        }
    })
</script>
</html>

 

2.同時驗證多個情況，也可以把驗證碼方法寫在html 中（個人不建議使用）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>
    <script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">
    <div class="username">
        <label for="">用戶名：</label>
<!-- 或者這么寫-->
 <!-- <input type="text" v-model="username" initial="off" v-validate:username="{noempty:true,username:true}" placeholder="請輸入用戶名">-->
        <input type="text" v-model="username" initial="off" v-validate:username="['noempty','username']" placeholder="請輸入用戶名">
        <p class="red" v-show="$validatorMethod.username.noempty">用戶名不能為空</p>
        <p class="red" v-show="$validatorMethod.username.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="password" initial="off" v-validate:password="{minlength:6,maxlength:20,pattern:'/^\d{6,20}$/'}" placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.password.minlength">密碼最低6位數</p>
        <p class="red" v-if="$validatorMethod.password.maxlength">密碼最高20位數</p>
        <p class="red" v-if="$validatorMethod.password.pattern">只能是數字</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            comment:"",
            username: "",
            password: "",
            newpassword:""
        },
        validators: {
            noempty:function(val){
                var reg = /^\s*$/g, isFlag = true;
                if(val == "" || reg.test(val)){
                    isFlag = false;
                }
                return  isFlag;
            },
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證目標表單元素。
                 * true:驗證所有
                 */
                self.$validate(true,function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.invalid){
                        alert("登錄成功");
                    }
                })
            }
        }
    })
</script>
</html>

 

 

3.提交時驗證所有表單：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>
    <script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">

    <div class="username">
        <label for="">用戶名：</label>
        <input type="text" v-model="username" initial="off" v-validate:username="['username']" placeholder="請輸入用戶名">
        <p class="red" v-if="$validatorMethod.username.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="password" initial="off" v-validate:password="['integer']" placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.password.integer">只能是數字</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            username: "",
            password: ""
        },
        validators: {
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證目標表單元素。
                 * true:驗證所有
                 */
                self.$validate(true,function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.invalid){
                        alert("登錄成功");
                    }
                })
            }
        }
    })
</script>
</html>

 

4.提交時指定表單驗證：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>
    <script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">

    <div class="username">
        <label for="">用戶名：</label>
        <input type="text" v-model="username" initial="off" v-validate:username="['username']" placeholder="請輸入用戶名">
        <p class="red" v-if="$validatorMethod.username.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="password"  placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.password.integer">只能是數字</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            username: "",
            password: ""
        },
        validators: {
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證[username]表單元素。
                 */
                self.$validate('username',function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.username.username){
                        alert("登錄成功");
                    }
                })
            }
        }
    })
</script>
</html>

 

5.v-model 是對象類型的參數提交時驗證所有表單 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>-->
    <!--<script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">

    <div class="username">
        <label for="">用戶名：</label>
        <input type="text" v-model="items.username" initial="off" v-validate:username="['username']" placeholder="請輸入用戶名">
        <p class="red" v-if="$validatorMethod.username.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="items.password" initial="off" v-validate:password="['integer']" placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.password.integer">只能是數字</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
           items:{
               username: "",
               password: ""
           }
        },
        validators: {
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證目標表單元素。
                 * true:驗證所有
                 */
                self.$validate(true,function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.invalid){
                        alert("登錄成功");
                    }
                })
            }
        }
    })
</script>
</html>

 

6.v-model 參數命名是駝峰式提交時驗證所有表單：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="src/vue.min.js"></script>-->
    <!--<script src="src/vue-validator.min.js"></script>-->
    <script src="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .btn{
            display: inline-block;
            padding: 10px;
            background: orange;
            color: #FFF;
            cursor: pointer;
        }
        .btn:hover{
            background: orangered;
        }
    </style>
</head>
<body id="app">

<validator name="validatorMethod">

    <div class="username">
        <label for="">用戶名：</label>
        <input type="text" v-model="items.userName" initial="off" v-validate:user-name="['username']" placeholder="請輸入用戶名">
        <p class="red" v-if="$validatorMethod.userName.username">由數字、26個英文字母或下划線和中文組成的字符串</p>
    </div>
    <div class="password">
        <label for="">密碼：</label>
        <input type="password" v-model="items.passWord" initial="off" v-validate:pass-word="['integer']" placeholder="請輸入密碼">
        <p class="red" v-if="$validatorMethod.passWord.integer">只能是數字</p>
    </div>
    <div><a @click="loginMethods" class="btn">登錄</a></div>
</validator>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
           items:{
               userName: "",
               passWord: ""
           }
        },
        validators: {
            username: function (val) {
                return /^[A-Za-z0-9_\-\u4e00-\u9fa5]{1,10}$/.test(val);
            },
            integer: function (val) {
                return /^[1-9]\d*$/.test(val);
            }
        },
        methods:{
            loginMethods:function () {
                var self = this;
                /**
                 * 驗證目標表單元素。
                 * true:驗證所有
                 */
                self.$validate(true,function () {
                    /*如果所有條件都是false*/
                    if(!self.$validatorMethod.invalid){
                        alert("登錄成功");
                    }
                })
            }
        }
    })
</script>
</html>

.

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 js 表單驗證實例 angular表單驗證實例----可用的代碼 HTML5 web Form表單驗證實例 gorm驗證實例 vue中使用element進行多表單驗證實踐 jQuery Ajax驗證實例 ThinkPHP 自動驗證實例 jQuery常用插件與jQuery使用validation插件實現表單驗證實例 [轉]formValidator的一些驗證實例 formValidator的一些驗證實例
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM