<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/reset.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/site.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/container.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/grid.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/header.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/image.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/menu.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/divider.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/segment.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/form.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/input.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/button.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/list.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/message.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/semantic-ui/2.1.8/components/icon.min.css" />
<style type="text/css">
body {
background-color: #DADADA;
}
body > .grid {
height: 100%;
}
.image {
margin-top: -100px;
}
.column {
max-width: 450px;
}
</style>
</head>
<body>
<div id="app" class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<img src="http://www.semantic-ui.cn/examples/assets/images/logo.png" class="image">
<div class="content">
Log-in to your account
</div>
</h2>
<validator name="form">
<form class="ui large form" :class="{ 'error': $form.invalid && trySubmit }" novalidate>
<div class="ui stacked segment">
<div class="field" :class="{ 'error': $form.email.invalid && trySubmit }">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="email" v-model="item.email" placeholder="E-mail address" v-validate:email="{ required: true, email: true }">
</div>
</div>
<div class="field" :class="{ 'error': $form.password.invalid && trySubmit }">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" v-model="item.password" placeholder="Password" v-validate:password="{ required: true, minlength: 6 }">
</div>
</div>
<div @click="submit($form)" class="ui fluid large teal submit button">Login</div>
</div>
<div class="ui error message" v-if="trySubmit">
<ul class="list">
<li v-if="$form.email.required">Please enter your e-mail</li>
<li v-if="$form.email.email">Please enter a valid e-mail</li>
<li v-if="$form.password.required">Please enter your password</li>
<li v-if="$form.password.minlength">Your password must be at least 6 characters</li>
</ul>
</div>
</form>
</validator>
<div class="ui message">
New to us? <a href="#">Sign Up</a>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue-validator/2.0.0-alpha.22/vue-validator.min.js"></script>
<script type="text/javascript">
Vue.validator('email', function (val) {
return /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i.test(val)
})
var vm = new Vue({
el: '#app',
data: function () {
return {
item: {
email: null,
password: null,
},
trySubmit: false,
}
},
methods: {
onReset: function () {
this.$resetValidation()
},
submit: function (form) {
this.trySubmit = true
if (form.valid) {
this.$log('item')
}
}
}
})
</script>
</body>
</html>
