Web前端vue.js表单验证实例
摘要： web前端开发和java后端 前端与移动开发与javascript 前端开发还是java 注意：vue 2.0 以后 validator 从 vue 里中下架里，暂时还没有更新！请用Vee 替换;用法和vue-validator 语法差不多。 vee-validate 注册 htm……
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>
<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
近期评论