Question

我希望能够使用实时页面验证而不是按下提交后显示的VALID或INVALID消息，我的代码验证电子邮件地址，当点击提交时，输入显示在下面，然后是有效或无效，如果有效它将为绿色，如果无效则为红色。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>
<meta charset=utf-8 />
<title>Email Validation</title>
</head>
<body>
<form onSubmit='validate(); return false;'>
<p>Enter an email address:</p>
<input id='email' placeholder="example@example.com" size="21">
<button type='submit' id='validate'>Submit</button>
</form>
<br/>
<h2 id='result'></h2>
<script>
function validateEmail(email) { 
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate(){
$("#result").text("");
var email = $("#email").val();
if (validateEmail(email)) {
$("#result").text(email + " is valid");
$("#result").css("color", "green");
} else {
$("#result").text(email + " is not valid");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
</script>
</body>
</html>

Answer 1

您可以使用电子邮件输入的onChange（）事件来调用您的validate（）方法而不是您的提交按钮，或者您可以调用这两个事件......

示例：

<input id='email' placeholder="example@example.com" size="21" onchange="validate()">

Answer 2

您好，您可以使用Jquery validate插件

$(function() {

// Setup form validation on the #register-form element
$("#register-form").validate({

// Specify the validation rules
rules: {
    firstname: "required",
    lastname: "required",
    email: {
        required: true,
        email: true
    },
    password: {
        required: true,
        minlength: 5
    },
    agree: "required"
},

// Specify the validation error messages
messages: {
    firstname: "Please enter your first name",
    lastname: "Please enter your last name",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    email: "Please enter a valid email address",
    agree: "Please accept our policy"
},

submitHandler: function(form) {
    form.submit();
}
});

});

Demo

Answer 3

将validate事件绑定到文本框的焦点上。

示例：

$（＆＃34; #mail＆＃34;）。focusout（function（）{

的validate（）;

}）;

这样，在您取消选择电子邮件文本框后，它就会在正确的时候运行，也就是当您填写它时，而不是在您提交表单时。

Answer 4

您也可以在javascript代码中解决该问题：

$("#email").on('input', function() {
  // do your validation here
});

每次在输入字段中输入或删除字符时，该功能都会自动调用。如果您只需要在用户按下RETURN后进行验证，或者焦点不再在输入字段上，请使用：

$("#email").on('change', function() {
  // do your validation here
});

Answer 5

我认为，这种方式更清洁 - 用作灵感：

function validateEmailField() ...

function validateAllFields() {
  return validateEmailField() && validateUsernameField();
}

// make sure submit on enter key or alike is triggering validate
// you might use a 'validateAll' function here
$('form').on('submit', validateAllFields);

// validate field on leaving it
$('form').on('blur', '#email', validateEmailField);

在此期间：您还可以使用HTML5-WebForms（对于旧版浏览器使用Polyfill）来使用非常简单的表单验证技术。看一下这个页面（验证进一步下调）...... Form Validation

实时验证而不是按钮点击验证

5 个答案: