vue-（prop验证-个人名片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人名片</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box {
/* border: 1px solid red ; */
width: 530px;
height: 350px;
position: relative;
margin: 0 auto;
margin-top: 200px;
}
.card {
border: 1px solid rgb(226, 213, 96);
border-top: 1px solid rgb(248, 241, 186);
width: 500px;
height: 310px;
background-image: url(img/bg.jpg);
background-size: cover;
color: gray;
border-radius: 10px;
box-shadow: 10px 10px 10px grey;
}
img {
width: 28px;
height: 28px;
padding: 2px;
}
.one {
border: 1px solid transparent;
width: 50px;
margin-top: 20px;
margin-left: 290px;
}
.two {
border: 1px solid transparent;
width: 150px;
margin-top: -280px;
float: right;
margin-right: 10px;
line-height: 34px;
color: rgb(31, 30, 22);
background-color: rgb(252, 251, 248);
border-radius: 10px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.left {
border: 1px solid transparent;
width: 140px;
height: 140px;
margin-top: -220px;
margin-left: 50px;
border-radius: 90px;
background-color: white;
box-shadow: 10px 10px 10px grey;
}
.er {
width: 80px;
height: 80px;
margin-left: 27px;
margin-top: 11px;
}
.p {
border: 1px solid transparent;
border-radius: 5px;
color: rgb(252, 251, 248);
background-color: rgb(226, 214, 104);
box-shadow: 10px 10px 10px rgb(163, 163, 162);
}
.text {
margin-left: 32px;
font-size: 19px;
}
.h {
margin-left: 0px;
margin-top: -290px;
}
.hh {
width: 45px;
height: 45px;
}
</style>
</head>
<body>
<div id="app">
<card :my-name="'zy'" :my-company="'TimiStudioGroup'" :my-position="'(IT部)前端工程师'" :my-phone="'18266668888'"
:my-email="'12345678@qq.com'">
</card>
</div>
<script>
Vue.component("card", {
props: {
id: [String, Number],
// 姓名（字符串类型，必须的）
myName: {
type: String,
validator: function (value) {
var reg = /^[\u4E00-\u9FA5]{2,4}$/;
if (reg.test(value)) {
return true;
}
// return false;
alert("姓名格式不对！")
}
},
// 公司（字符串类型，必须的）
myCompany: {
type: String,
validator: function (value) {
var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
if (reg.test(value)) {
return true;
}
// return false;
alert("公司格式不对！")
}
},
// 职位（字符串类型，非必须）
myPosition: {
type: String,
validator: function (value) {
var reg = /^[\u4e00-\u9fa5\(\)（）\da-zA-Z&]{2,50}$/gi;
if (reg.test(value)) {
return true;
}
// return false;
alert("职位格式不对！")
}
},
// 手机（字符串类型，要验证）
myPhone: {
type: String,
validator: function (value) {
var reg = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/;
if (reg.test(value)) {
return true;
}
// return false;
alert("手机号格式不对！")
}
},
// 邮箱（字符串类型，要验证）
myEmail: {
type: String,
validator: function (value) {
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (reg.test(value)) {
return true;
}
// return false;
alert("邮箱格式不对！")
}
}
},
template: `
<div class="box">
<div class="card">
<div class="one">
<p><img src="img/name.png"></p>
<p><img src="img/company.png"></p>
<p><img src="img/position.png"></p>
<p><img src="img/phone.png"></p>
<p><img src="img/email.png"></p>
</div>
<div class="two">
<p class="p">{{myName}}</p>
<p class="p">{{myCompany}}</p>
<p class="p">{{myPosition}}</p>
<p class="p">{{myPhone}}</p>
<p class="p">{{myEmail}}</p>
</div>
<div class="left">
<p><img src="img/er.png" class="er"></p>
</div>
<div class="text">
<p>Welcome to our team .</p>
</div>
<div class="h">
<p><img src="img/h.png" class="hh"></p>
</div>
</div>
</div>
`
})
var app = new Vue({
el: "#app",
})
</script>
</body>
</html>
- Vue-动态组件-单向数据流-跨组件通信-Prop验证
- [vue.js] prop验证没有错误信息的可能原因：没有使用开发者版本
- 网站个人中心，vue实现jwt验证，历史浏览记录，退出登录，邮件绑定
- 100佳精美的个人名片欣赏（系列二）
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
- vue项目nginx部署 - 邱乘屹的个人技术博客
- vue表单验证
- vue.js组件的个人总结
- 个人Vuex的一些使用方法
- ASP.NET Core 一步步搭建个人网站（4）_主页和登录验证
- 解决方案：SSM+vue+webpack+vue-resource+vue-route路由项目验证session过期跳转至登陆界面
- Android中可通过二维码扫描，直接显示个人名片信息，而且可以点击添加，调用系统的添加联系人功能
- Vue------第五天（关于组件的一些基础了解，包括组件的注册、Prop、自定义事件、使用插槽分发内容等）
- Vue Elementui Form表单验证
- vue.js 表单参数验证方法
- 个人名片与诚信
- vue路由验证和请求拦截
- Vue--搭建个人博客
- vue/iview表单验证选择器选择了却提示为空
- vue elementui form表单验证的实现