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

Question

我有一个与 Vue 和本地存储一起使用的注册表单，当我提交表单为空白或遗漏输入时，数据将相同地进入本地存储，并且不显示通过添加required属性使用的 HTML 验证。 如果表单的输入为空或 email 没有插入 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;
                }

                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

您需要将 button type='submit'添加到提交按钮，否则它的行为就像任何其他按钮一样。

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

然后它只充当提交按钮，否则它只会触发附加的按钮事件监听器。

Answer 2

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

必需="必需"

这是不正确的，它将不起作用； 就这样写吧：

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

---

您可以像这样验证 email：

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

您可以将 class 添加到按钮，如 jsValidateRegister。 并添加代码首先声明一个变量

isPageValid = true

然后添加以下代码进行验证，以便在 passuseremail(); 中将 isPageValid 设置为 false；

$(".jsValidateRegister").click(function ()
{
    passuseremail();    
});

在onSubmit: function() 勾选

isPageValid === true