找回密码
当前位置：前端开发者 > Vue.js > 正文

Web前端Vue.js表单验证实例

2018-09-17 20:44:44 分类：Vue.js 阅读(692) 评论(0)

web前端开发和java后端 前端与移动开发与javascript 前端开发还是java

注意：vue 2.0 以后 validator 从 vue 里中下架里，暂时还没有更新！请用Vee 替换;用法和vue-validator 语法差不多。
vee-validate

注册

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=”[‘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>

####同时验证多个情况，也可以把验证码方法写在html 中（个人不建议使用）
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>
提交时验证所有表单：

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=”[‘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>
提交时指定表单验证：

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=”[‘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>

#####v-model 是对象类型的参数提交时验证所有表单 ：
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=”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>

##### v-model 参数命名是驼峰式提交时验证所有表单：
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=”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>

注意：

如果大家用的webpack 管理工具，将validator 写在 app.js 中：
1.导入vue-validator

2.安装插件
3.封装正则

4.在vue模板中写法前面代码已经贴过啦

java开发和前端 java开发和web前端 java前端开发视频教程

» 本文来自：前端开发者 » 《Web前端Vue.js表单验证实例》
» 本文链接地址：https://www.rokub.com/5762.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论