Add a new line to return inside method-CodePudding

CODE:

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;
            },

If you look at the return for the regex test, I am trying to use \n to create a new line, I have tried anything I can think of but cannot get it to give me a new line when the return is called. I cannot remember what the syntax is and its driving me mad! To break it out, this is the specific line I am struggling with

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';

CodePudding user response：

The new line special character \n only works in Unix systems.

In HTML, you want to use the <br> tag to create a new line.

But that means you have to parse your string to html to make it work. You can't specify a new line in a simple string without splitting in to several html tags.

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

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

Another way to do would be to split your error message so that 1 line is one string. For example, you can set all your error messages to an array, and diplay that array in a ul list.

<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>