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

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 v-on:click='onSubmit' onclick="passuseremail()" 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 )) {

    /* email is valid */

} else {

    /* email is not valid */

}

Answer 3

您可以向按钮添加一个类，例如 jsValidateRegister。并添加代码首先声明一个变量

isPageValid = true

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

$(".jsValidateRegister").click(function ()

{

    passuseremail();    

});

在 onSubmit:function() 中检查

isPageValid === true