公式
https://vuelidate.js.org/
これが一番しっくりくるなぁ。。正直Reactより使いやすい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- <link rel="stylesheet" href="sample.css"> -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- <script src="sample.js"></script> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.2/dist/vue.global.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/validators.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.4/dist/vuelidate.min.js"></script>
</head>
<body>
<div id="app" class="container mt-5">
<h2>{{title}}</h2>
<!-- <pre>{{ $v }}</pre> -->
<div class="row">
<div class="col-sm-8">
<form @submit.prevent="submitForm" action="/hoge">
<div class="form-group">
<label for="name">名前:</label>
<input type="name" class="form-control" id="name" v-model="name" @blur="$v.name.$touch()">
<div v-if="$v.name.$error">
<span v-if="!$v.name.required">名前が入力されていません。</span>
<span v-if="!$v.name.alphaNum">英数字で入力してください。</span>
<span v-if="!$v.name.minLength">5文字以上で入力してください。</span>
<span v-if="!$v.name.maxLength">10文字以下で入力してください。</span>
</div>
</div>
<div class="form-group">
<label for="age">年齢:</label>
<input type="age" class="form-control" id="age" v-model="age">
</div>
<div class="form-group">
<label for="email">メールアドレス:</label>
<input type="email" class="form-control" id="email" v-model="email" @blur="$v.name.$touch()">
<div v-if="$v.email.$error">
<span v-if="!$v.email.required">メールアドレスが入力されていません。</span>
<span v-if="!$v.email.email">メールアドレスの形式が正しくありません。</span>
</div>
</div>
<button type="submit" class="btn btn-info">送信</button>
<!-- <button :disabled="$v.$invalid" type="submit" class="btn btn-info">送信</button> -->
</form>
</div>
</div>
</div>
<script>
Vue.use(window.vuelidate.default);
const { required, email, maxLength, minLength, alphaNum } = window.validators;
const app = new Vue({
el: '#app',
data: {
title: '入力フォームバリデーション',
name: '',
age: '',
email: '',
},
validations: {
name: {
required,
alphaNum,
minLength: minLength(4),
maxLength: maxLength(10),
},
email: {
required,
email
}
},
methods: {
submitForm() {
this.$v.$touch();
if (this.$v.$invalid) {
console.log('バリデーションエラー');
} else {
console.log('submit');
}
}
}
});
</script>
</body>
</html>
