Vue.jsのフォームでゼロ幅文字を送信できないようにしたい

前提・実現したいこと

Vue.jsを使ってフォームを作成中です。

名前の中にゼロ幅文字が入っていた場合に送信できないようにしたいです。

考えられるやり方としては

名前にゼロ幅文字が含まれていた場合にエラー文を表示する
ゼロ幅文字を何らかの文字に変換して送信する
ゼロ幅文字を飛ばして送信する

などがあると思うのですが、どのように書けば良いのか分かりません。
こちらが参考になるかな？と思いました…

勉強不足で恐縮ですが、ご教示いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

記号ゼロ幅の空白文字をJavaScript文字列から削除する
が入ってたらNGっていうことなら

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="app">
10  <form action="./vue.html" methods="post">
11    <input type="text" v-model="name">
12    <input type="submit" value="send" v-bind:disabled="submitDisabled">
13  </form>
14</div>
15<script>
16var app = new Vue({
17  el: '#app',
18  data: {
19    name: 'a\u200Bb\u200Cc\u200Dd\uFEFFe',
20  },
21  computed: {
22    // 送信ボタン押せるか
23    submitDisabled: function() {
24      // 何も入ってないときはNG
25      if(this.name.length <= 0) {
26        return(true);
27      }
28      return(/[\u200B-\u200D\uFEFF]/.test(this.name));
29    }
30  },
31  methods: {
32  },
33});
34</script>
35</body>
36</html>

投稿2019/09/26 03:16

rururu3

総合スコア5545

fra5la

2019/10/02 05:13

拙い質問にご回答くださりありがとうございます！ ``` var app = new Vue({ el: '#app', data: { name: 'a\u200Bb\u200Cc\u200Dd\uFEFFe', }, computed: { // 送信ボタン押せるか submitDisabled: function() { // 何も入ってないときはNG if(this.name.length <= 0) { return(true); } return(/[\u200B-\u200D\uFEFF]/.test(this.name)); } }, ``` 上記はゼロ幅文字が送信されたら置き換えをしている、ということになるのでしょうか？