在 return 内部方法中添加一个新行

Question

代码：

validatePassword(value) {
                if (!value) {
                    return 'This field is required';
                }
                const regex = /^.*(?=.{6,})(?=.*d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/i;
                if (!regex.test(value)) {
                    return 'Password must be:\n-Minimum 6 characters\n-Include minimum 1 Uppercase letter\n-Include minimum 1 lowercase letter\n-Include minimum 1 symbol';
                }
                return true;
            },

如果您查看 return 的正则表达式测试，我正在尝试使用 \n 来创建一个新行，我已经尝试了我能想到的任何方法但无法得到它给我一个新的调用 return 时的行。我不记得语法是什么，它让我发疯！打破它，这是我正在努力的特定行

return 'Password must be:\n-Minimum 6 characters\n-Include minimum 1 Uppercase letter\n-Include minimum 1 lowercase letter\n-Include minimum 1 symbol';

Answer 1

换行特殊符\n只在Unix系统有效

在 HTML 中，您想使用 <br> 标记来创建一个新行。

但这意味着您必须将字符串解析为 html 才能使其正常工作。如果不拆分为多个 html 标记，则无法在简单字符串中指定新行。

<template>
  <div v-html="error" />
</template>

<script>
...
validatePassword () {
 this.error = "Password must be:<br>-Minimum 6 characters"
}
</script>

另一种方法是拆分您的错误消息，以便 1 行是一个字符串。例如，您可以将所有错误消息设置为一个数组，然后将该数组显示在 ul 列表中。

<template>
  <ul v-for="error of errors" :key="error">
    <li>{{ error }}</li>
  </ul>
</template>

<script>
  [...]
  this.errors = ['Minimum 6 characters', 'Include minimum 1 Uppercase letter', ...]
</script>

在 return 内部方法中添加一个新行

Add a new line to return inside method

vue.js

vee-validate