必需属性在注册表单中不起作用

Question

我有一个可与 Vue 和本地存储一起使用的注册表单，当我将表单提交为空白或省略输入时，数据将相同地进入本地存储，并且不显示通过添加required属性使用的 HTML 验证。如果表单的输入为空或电子邮件没有插入 at 符号，有什么方法可以通过显示 HTML 验证来解决此问题。

形式：

<form id="signup" method="post" v-on:submit.prevent>

    <br>

    <h1>Registration</h1>

    <label for ="studentsorparents">Student or parents:</label>

    <input type="text" id="studentsorparents" v-model="studentsorparents" required ="required">

    <br><br>

    <label for ="username">username:</label>

    <input  type="text" id="username" v-model="username" required ="required" v-text="null">

    <br><br>

    <label for="email">email: </label>

    <input  type="email" id="email" v-model='email' required ="required">

    <br><br>

    <label for="password">password: </label>

    <input  type="password" id="password" v-model='password' required ="required">

    <br><br>

    <button v-on:click='onSubmit' onclick="passuseremail()" >Register</button>

</form>

JS：

var signupApp = new Vue({

    el: '#signup',

    data: {

        studentsorparents: '',

        username: '',

        email: '',

        password: '',

    },

    methods: {

        onSubmit: function () {

            // check if the email already exists

            var users = '';

            var studentParent = this.studentsorparents;

            var newUser = this.username;

            var newEmail = this.email;

            if (localStorage.getItem('users')) { // 'users' is an array of objects

                users = JSON.parse(localStorage.getItem('users'));

            }

            if (users) {

                if (users.some(function (user) {

                    return user.username === newUser

                })) {

                    alert('Account already exits');

                    return;

                }

Answer 1

您需要将按钮添加type='submit'到提交按钮，否则它的行为就像任何其他按钮一样。<button&nbsp;v-on:click='onSubmit'&nbsp;onclick="passuseremail()"&nbsp;type="submit">Register</button>然后它只充当提交按钮，否则它只会触发附加的按钮事件监听器。

Answer 2

required输入中的属性后有空格：必需="必需"这是不正确的，它将不起作用；就这样写吧：<input type=email id=email v-model=email required>您可以像这样验证电子邮件：const email_re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;if (email_re.test( email.value )) {&nbsp; &nbsp; /* email is valid */} else {&nbsp; &nbsp; /* email is not valid */}

Answer 3

您可以向按钮添加一个类，例如 jsValidateRegister。并添加代码首先声明一个变量isPageValid = true然后添加以下代码进行验证，以便在 passuseremail(); 中将 isPageValid 设置为 false；$(".jsValidateRegister").click(function (){&nbsp; &nbsp; passuseremail();&nbsp; &nbsp;&nbsp;});在 onSubmit:function() 中检查isPageValid === true