VUE表單驗證
此示例是一個用VUE驗證表單字段的示例。
表單外觀如下圖。
register.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>注冊</title>
<script type="text/javascript" src="{{ static("js/host.js") }}"></script>
<script type="text/javascript" src="{{ static("js/vue-2.5.16.js") }}"></script>
<script type="text/javascript" src="{{ static("js/axios-0.18.0.min.js") }}"></script>
</head>
<body>
<h2>注冊頁面</h2>
<div id="app" v-cloak>
<form method="POST">
<label>用戶名：</label><br>
<input type="text" name="username" id="user_name" v-model="vmodel_username" @blur="blur_username">
<span v-show="vshow_username">[[ username_msg ]]</span>
<br>
<label>密碼：</label><br>
<input type="password" name="pwd" id="pwd" v-model="vmodel_password" @blur="blur_pwd">
<span v-show="vshow_pwd">[[ pwd_msg ]]</span>
<br>
<label>確認密碼：</label><br>
<input type="password" name="cpwd" id="cpwd" v-model="vmodel_cpwd" @blur="blur_cpwd">
<span v-show="vshow_cpwd">[[ cpwd_msg ]]</span>
<br>
<label>手機號：</label><br>
<input type="text" name="phone" id="phone" v-model="vmodel_phone" @blur="blur_phone">
<span v-show="vshow_phone">[[ phone_msg ]]</span>
<br>
<input type="checkbox" name="allow" id="allow" checked="checked" v-model="vmodel_allow">
<label>同意協議</label>
<span v-show="vshow_allow">[[ allow_msg ]]</span><br>
<input type="submit" value="注冊">
</form>
</div>
<script type="text/javascript" src="{{ static("js/register.js") }}"></script>
</body>
</html>
register.js代碼如下：
var vm = new Vue({
el:'#app',
delimiters:['[[', ']]'],
data:{
host:host,
// 這里對應v-show
vshow_username:false,
vshow_pwd:false,
vshow_cpwd:false,
vshow_phone:false,
vshow_allow:false,
// 這里對應錯誤信息
username_msg:'',
pwd_msg:'',
cpwd_msg:'',
phone_msg:'',
allow_msg:'',
// 這里的變量對應v-model
vmodel_username:'',
vmodel_password:'',
vmodel_cpwd:'',
vmodel_phone:'',
vmodel_allow:true
},
methods:{
// 這里對應@blur
blur_username:function(){
// 檢查正則匹配
var re_username = /^[a-zA-Z0-9_-]{5,20}$/;
if(re_username.test(this.vmodel_username)){
this.vshow_username = false;
}
else{
this.username_msg = '不符合正則：^[a-zA-Z0-9_-]{5,20}$';
this.vshow_username = true;
}
},
blur_pwd:function(){
// 檢查正則匹配
var re_pwd = /^[0-9A-Za-z]{8,20}$/;
if(re_pwd.test(this.vmodel_password)){
this.vshow_pwd = false;
}
else{
this.pwd_msg = '不符合正則：^[0-9A-Za-z]{8,20}$';
this.vshow_pwd = true;
}
},
blur_cpwd:function(){
// 檢查是否與password一樣
if(this.vmodel_password == this.vmodel_cpwd){
this.vshow_cpwd = false;
}
else{
this.cpwd_msg = 'pwd!=cpwd';
this.vshow_cpwd = true;
}
},
blur_phone:function(){
// 檢查正則
var re_phone = /^1[345789]\d{9}$/;
if(re_phone.test(this.vmodel_phone)){
this.vshow_phone = false;
}
else{
this.phone_msg = '不符合正則：^1[345789]\d{9}$';
this.vshow_phone = true;
}
},
}
});
v-model可以實時接收input標簽中填入的值。在本示例中，vue對象獲取v-model可以獲取填入input中的值，然后進行驗證。
結果如圖：
