要引入jq、vue.js
vue.js在線網址<script src="https://unpkg.com/vue"></script>
js:<script src="js/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app">
<p>
<input @change="checkname" type="text" v-model="name" placeholder="用戶名">
<span>{{msgame}}</span>
</p>
<p>
<input @change="checkemail" type="text" v-model="email" placeholder="郵箱">
<span>{{msgmail}}</span>
</p>
<p>
<input @change ="checkphone" type="text" v-model = "phone" placeholder="手機" id="phone">
<span>{{msgphone}}</span>
</p>
<p>
<input @change="checkpassword" type="password" v-model="password" placeholder="密碼" id="test">
<span>{{msgpassword}}</span>
</p>
<p>
<input @change="checkpwd" type="password" v-model="pwd" placeholder="重複密碼" id="test1">
<span>{{msgpwd}}</span>
</p>
<p>
<span v-for="item,index in sex">
<input type="radio" name="sex" :value="index">{{item}}
</span>
</p>
<p>
<input @change="checkage" type="number" v-model="age" placeholder="年齡">
<span>{{msgage}}</span>
</p>
<p>
<textarea v-model="desc"></textarea>
</p>
<p>
<input type="datetime-local" v-model="birthday">
</p>
<p>
<select >
<option :value="index" v-for="item,index in city">{{item}}</option>
</select>
</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:"#app",
data:{
msgame:"",
msgmail:"",
msgpassword:"",
msgpwd:"",
msgage:"",
msgphone:"",
name:"",
email:"",
password:"",
pwd:"",
phone:"",
age:"",
desc:"hello",
birthday:"",
sex:{
girl:"女",
boy:"男",
},
city:{
"sz":"宿州",
"cz":"滁州",
"la":"六安",
"hn":"淮南",
}
},
methods:{
checkname:function(){
if(this.name=""){
this.msgame = "用戶名不能爲空";
}else{
this.msgame ="";
}
},
checkemail:function(){
var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
if(this.email==''){
this.msgmail="請輸入郵箱";
}else if(!regEmail.test(this.email)){
this.msgmail="郵箱格式不正確";
}
},
checkpassword:function(){
var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//
var value = $('#test').val();
if(this.password==""){
this.msgpassword = "密碼不能爲空"
}else if(!pwdReg.test(value)){
this.msgpassword = "密碼不合法";
}else{
this.msgpassword = "密碼合法";
}
},
checkpwd:function(){
if(this.pwd==""){
this.msgpassword ="密碼不能爲空"
}else if(this.pwd !=this.password){
this.msgpwd = "輸入密碼保持一致"
}else{
this.msgpwd ="輸入密碼正確"
}
},
checkphone:function(){
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(this.phone==""){
this.msgphone="手機號不能爲空";
}else if(!myreg.test($("#phone").val())){
this.msgphone="請輸入有效的手機號碼";
}else{
this.msgphone="輸入正確"
}
},
checkage:function(){
if(this.age==""){
this.msgage = "年齡不能爲空"
}else{
this.msgage="輸入正確"
}
},
}
})
</script>怎樣用vue.js實現表單驗證
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,