vue 表单验证实例
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>
.
vue 表单验证实例的更多相关文章
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- Bootstrap+PHP表单验证实例
简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- jquery-4 完整表单验证实例
jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue表单验证：vee-validate中文提示
官方文档:https://baianat.github.io/vee-validate/guide/ vee-validate可用于vue项目中进行表单验证,使用方法在官方API上都可以查到: 使用过 ...
- Vue表单验证插件的制作过程
一.表单验证模块的构成 任何表单验证模块都是由 配置――校验――报错――取值 这几部分构成的. 配置: 配置规则 和配置报错,以及优先级 校验: 有在 change 事件校验, 在点击提交按钮的时候校 ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
随机推荐
- python-函数（命名空间、作用域、闭包）
一.命名空间 全局命名空间 局部命名空间 内置命名空间 *内置命名空间中存放了python解释器为我们提供的名字:input,print,str,list,tuple...它们都是我们熟悉的,拿过来就 ...
- c语言，warning: return type of 'main' is not `int'怎么解决？
////警告可以忽略,但如果严格点的话 #include<stdio.h> #include<math.h> int main(int argc, char *arg[]) ...
- Java中的new关键字和引用传参
先看看Java中如何使用new关键字创建一个对象的. [java] view plain copy public class Student { public String name; public ...
- 云平台服务运行情况检测脚本V0.1
1.准备Python3环境 yum groupinstall "Development tools" -y yum install zlib-devel bzip2-devel o ...
- 在WINDOWS2008 Server 中创建NFS服务器，使用LINUX的MOUNT命令去加载网络盘
1.在WINDOWS服务器中创建NFS SERVER 首先,打开服务管理器,选择添加角色: 选中文件服务,下一步: 出现一个提示,不管它,继续下一步: 在接下来的页面中选中“网 ...
- linux+win7双系统重装win7修复grub的办法
本人是debian+win7的双系统, 下面介绍下重装win7的整个过程以及遇到的一些小问题,在查阅相关博客和朋友的帮助下成功修复, 记录下以便以后有不时之需, 也希望能帮助到遇到同样问题的朋友! 首 ...
- CF 917A The Monster 【括号匹配】
[链接]:CF Examples inputCopy ((?)) outputCopy 4 inputCopy ??()?? outputCopy 7 说明 For the first sample ...
- 【动态规划】矩形嵌套 （DGA上的动态规划）
[动态规划]矩形嵌套 时间限制: 1 Sec 内存限制: 128 MB提交: 23 解决: 9[提交][状态][讨论版] 题目描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a, ...
- Robot Framework与Web界面自动化测试：简单例子
假设环境已经搭建好了.这里用RIDE( Robot Framework Test Data Editor)工具来编写用例.下面我们对Robot Framework简称rf. 我们先考虑下一个最基本的登 ...
- Codeforces 915 G Coprime Arrays
Discipntion Let's call an array a of size n coprime iff gcd(a1, a2, ..., an) = 1, where gcd is the g ...