必填属性无法使用注册表格

Question

我有一个适用于Vue和本地存储的注册表单，当我提交空白表单或忽略输入时，数据将以相同的方式进入本地存储，并且不显示通过添加required来使用的HTML验证属性。如果表单输入的内容为空，或者电子邮件中没有插入符号，是否可以通过显示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;
                }

                if (users) {
                    if (users.some(function (user) {
                        return user.email === newEmail

                    })) {
                        alert('Account already exits');
                        return;


                    } else {

                        alert('Account created');
                        window.location.href = 'user-profile.html' + '#' + newUser;
                    }
                }
                users.push({
                    'studentsorparents': studentParent,
                    'username': newUser,
                    'email': newEmail,
                    'password': this.password
                });
                localStorage.setItem('users', JSON.stringify(users));
            } else {
                users = [{
                    'studentparents': studentParent,
                    'username': newUser,
                    'email': newEmail,
                    'password': this.password
                }];
                localStorage.setItem('users', JSON.stringify(users));
            }
        }
    }

    });

function passuseremail()

{
        var username = document.getElementById('username').value;
        localStorage.setItem("user-check", username);
        var studentsorparents=document.getElementById('studentsorparents').value;
        localStorage.setItem("students-parents-check", studentsorparents)
        var email=document.getElementById('email').value;
        localStorage.setItem("email-check", email)
         return false
}

Answer 1

您需要将按钮type='submit'添加到提交按钮，否则它将像其他任何按钮一样工作。

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

然后它仅充当提交按钮，否则将触发附加的按钮事件侦听器。 

Answer 2

您在输入中的required属性后有空格：

required =“ 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 )) {
    /* email is valid */
} else {
    /* email is not valid */
}

Answer 3

您可以将类添加到jsValidateRegister之类的按钮。并添加代码首先声明一个变量

isPageValid = true

然后添加以下代码进行验证，以便在passuseremail（）中将isPageValid设置为false； 
$(".jsValidateRegister").click(function ()
{
    passuseremail();    
});

在onSubmit：函数（）中检查
isPageValid === true