码上快乐

相关内容   简体   繁体

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