sfzsr:function(){
//7---14位
var sfh=this.userInfo.sfzh
var sr="2003-04-05" //sfh.substring(6,14)
this.userInfo.birthday=sr
alert(this.userInfo.birthday)
return this.userInfo.birthday
}
附上vue各种功能? 如年龄 判断生日判断等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/vue.js"></script>
<script src="/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<h1>账号注册</h1>
<form action="" method="post">
请输入你的账户: <input type="text" v-model.lazy="userInfo.account" placeholder="长度不得大于7" > <br>
账户的长度为: {{userInfo.account.length}} <br>
请输入你的密码: <input type="password" v-model.lazy="userInfo.pwd" placeholder="长度不得大于10,必须是 数字+字母+大小写+特数字的组合" > <br>
请输入你的身份证号: <input type="text" v-model.lazy="userInfo.sfzh" placeholder="请输入你的身份号，作业，身份证号带校验，生日和年龄和性别，根据身份证号的数值做出主动改变" >
<br>
您的性别是{{ sfzhpd }}-----
您的生日是{{ sfzsr }}
<br>
请输入你的生日： <input type="date" v-model="userInfo.birthday" > <br>
请输入你的年龄: <input type="text" v-model="userInfo.age"> 您的年龄是： {{ suanChuLaiDeAge }},
请输入你的性别: <input type="radio" id="man" value="1" v-model="userInfo.sex">
<label for="man">男</label>
<input type="radio" id="woman" value="0" v-model="userInfo.sex">
<label for="woman">女</label> <br>
你的女朋友们:
<div v-for="(value, key) in girlFriends" :key="value.girlId" >
<input type="checkbox" :id="value.girlId" :value="value.girlId" v-model="userInfo.girls">
<label :for="value.girlId">{{value.girlName}}</label>
</div>
你打疫苗了么：
<input type="checkbox" id="yimiao" v-model="userInfo.yimiao">
<label for="yimiao">是否打过疫苗</label>
<br>
你住的城市是：
<select v-model="userInfo.city">
<option disabled value="">请选择</option>
<option v-for="(value, key) in cityInfo" :key="value.cityId" :value="value.cityId" > {{value.cityName}} </option>
</select>
</form> <br>
<h1>将来ajax中的 DATA</h1>
<div>
姓名：{{userInfo.account}} <br>
密码： {{userInfo.pwd}} <br>
您的身份证号是:{{userInfo.sfzh}}<br>
生日： {{ userInfo.birthday }} <br>
性别： {{userInfo.sex}} <br>
女朋友们: {{userInfo.girls}} <br>
打疫苗的状态为： {{userInfo.yimiao}} <br>
你的城市是: {{userInfo.city}}
</div>
</div>
<script>
var zhangchi = new Vue({
el:"#app",
data(){
return {
userInfo:{
account:'',
pwd:'',
birthday:'',
age:'',
sex:'0',
girls:[],
yimiao:'',
city:''
,sfzh:''
},
girlFriends:[
{
girlId:001,
girlName:"景川鲤鱼"
},
{
girlId:003,
girlName:"范思思"
},
{
girlId:004,
girlName:"冯提莫"
}
],
cityInfo:[
{
cityId:001,
cityName:'郑州'
},
{
cityId:002,
cityName:'许昌'
}
]
}
},
methods: {
},
watch: { // 要观察的对象(一般为非DOM事件) 上帝视角
"userInfo.account":function(newVal, oldVal){
console.log('新值',newVal)
console.log('旧值',oldVal)
if(newVal.length>7){
alert('数据超过7了')
this.userInfo.account=''
}
},
"userInfo.pwd":function(newVal,old){
var pd=/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*$/;
if(!pd.test(newVal)){
alert("格式不正确,必须是 数字+字母+大小写+特数字的组合")
}
if(newVal.length>=10){
alert("长度不得大于10位,密码大于10位了")
}
},
"userInfo.sfzh":function(newVal,old){
if(newVal.length!=18){
alert('请输入正确的身份证号')
return false
}
}
},
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
suanChuLaiDeAge:function(){
console.log(this==zhangchi)
var nowDate = new Date();
var dateStr= this.userInfo.birthday;
var date = new Date (dateStr) ;
var times = nowDate - date;
var s = 365*24*3600 // 每年的秒数
var year = times/1000/s // 具体 的年龄
var y= Math.floor(year) ;
this.userInfo.age=y;
return y ;
},
sfzhpd:function(){
//111222200302163379测试用的数字
var sfh=this.userInfo.sfzh
//截取到身份证地十七位用来判断男女 var nn
var sfhm=sfh.substr(15,16)
var nn= sfhm.substring(1,2)
//如果没有身份证就判断 为空
if(nn==''||nn==null){
return ''
}
//根据十七为判断男女
if(nn%2==0){
this.userInfo.sex='女'
}else{
this.userInfo.sex='男'
}
return this.userInfo.sex
},
sfzsr:function(){
//7---14位是年龄
var sfh=this.userInfo.sfzh
//截取年月日然后拼接成date 如2003-02-16
var sr= sfh.substring(6,14)//"2003-04-05"
var nian=sr.substring(0,4)
var ye=sr.substring(4,6)
var ri=sr.substring(6,8)
var shengri= nian+"-"+ye+"-"+ri
//赋值给生日
this.userInfo.birthday=shengri
return this.userInfo.birthday
}
},
});
</script>
</body>
</html>
|