使用 Vue.js 的计算属性(computed)做表单验证是一个非常省心省车事情,源码示例是一套简单的注册表单校验
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用 Vue.js 做表单验证</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="helang.love@qq.com">
<link rel="stylesheet" href="https://mydarling.gitee.io/resource/Bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="padding-top: 20px;">
<h3 class="text-danger">移动模式浏览效果</h3>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">注册</div>
<div class="panel-body">
<form id="register">
<div class="form-group">
<label for="nikeName">用户名</label>
<input type="text" class="form-control" id="nikeName" placeholder="请输入用户名" v-model="nikeName">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码" v-model="pwd">
</div>
<div class="form-group">
<label for="pwd2">确认密码</label>
<input type="password" class="form-control" id="pwd2" placeholder="请输入确认密码" v-model="pwd2">
</div>
<div class="form-group">
<label for="email">联系邮箱</label>
<input type="text" class="form-control" id="email" placeholder="请输入邮箱" v-model="email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model="consent"> <span>同意服务条款</span>
</label>
</div>
<button type="button" class="btn btn-block" @click="submit" :class="verify.flag ? 'btn-primary' : 'btn-default'">确认注册</button>
</form>
</div>
<div class="panel-footer text-primary">© 2019 helang.love@qq.com</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://mydarling.gitee.io/resource/vue/vue.min.js"></script>
<script type="text/javascript" src="https://mydarling.gitee.io/resource/layer/mobile/layer.js"></script>
<script type="text/javascript">
new Vue({
el: '#register',
data: {
nikeName:'',
pwd:'',
pwd2:'',
email:'',
consent:false
},
computed:{
verify:function () {
if(!this.nikeName){
return {"flag":false,"msg":'请填写有效的用户名'};
}
if(this.pwd.length<6 || this.pwd.length>16){
return {"flag":false,"msg":'密码长度在6-16个字符之间'};
}
if(this.pwd != this.pwd2){
return {"flag":false,"msg":'两次输入的密码不一致'};
}
if(!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(this.email)){
return {"flag":false,"msg":'请填写有效的邮箱'};
}
if(!this.consent){
return {"flag":false,"msg":'请勾选[同意服务条款]'};
}
return {"flag":true,"msg":'ok'};
}
},
methods:{
submit:function () {
if(!this.verify.flag){
layer.open({
content: this.verify.msg,
skin: 'msg',
time: 2
});
return;
}
var loading=layer.open({
type: 2,
content: '正在注册中'
});
setTimeout(function () {
layer.close(loading);
layer.open({
content: '注册成功,去体验吗?',
btn: '立即体验',
yes:function () {
layer.closeAll();
setTimeout(function () {
window.open('https://blog.csdn.net/u013350495');
},500);
}
});
},2000);
}
}
})
</script>
</body>
</html>
作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com
公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号
来源:CSDN
作者:黄河爱浪
链接:https://blog.csdn.net/u013350495/article/details/89403412