Javascript 如何执行提交表单验证

我想将表单中提交后的检查替换为在表单字段失去焦点时执行的动态完整性和正确性检查

我该怎么做

形式
正文{
宽度：500px；
}
.部分{
宽度：100%；
填充物：5px；
边框底部：1px实心#000；
}
标签{
右边距：5px；
}
.左标签{
文本对齐：右对齐；
}
.标签正确{
文本对齐：左对齐；
}
.错误{
颜色：#cc0000；
}
//$（文档）.ready（函数（）{
函数myValidateEMailAddress（电子邮件地址）{
var email\u pattern=/^（[\w-\.]+@（[\w-]+\.）+[\w-]{2,4}）？$/；
返回电子邮件模式测试（电子邮件地址）；
}
功能检查密码（pwd_str）{
变量my_pwd_pattern=/^（？=.[a-zA-Z].[a-zA-Z]）（？=..*\d.*\d）[a-zA-Z0-9.]{6,20}$/；
返回我的pwd_模式测试（pwd_str）；
}
功能验证电话号码（电话号码）{
变量phone\u模式=/^（\（？\+？[0-9]*\）？）？[0-9\-\（\）]*$/；
返回电话号码模式。测试（电话号码）；
}
$（文档）.ready（函数（）{
$（'表格'）。提交（功能（e）{
var my_errors=false；
$（'.part>.error'）.remove（）；
$（“#我的提交”）.empty（）；
$（'：text，：password，textarea'）。每个（函数（）{
$（this.val（$.trim（$（this.val（）））；
if（$（this.val（）=''）{
$（this.parent（）.append（'请提供一个值'）；
我的错误=正确；
}
});
如果（$（'#email'）.val（）！=''）{
如果（！myValidateEMailAddress（$（'#email'）.val（））{
$（'#email'）.parent（）.append（'请提供正确的电子邮件地址'）；
我的错误=正确；
}
}
如果（$（'#您的#密码'）.val（）！=''）{
如果（！checkPassword（$（'#您的_密码'）.val（））{
$（“#您的#密码”）.parent（）.append（'请提供正确的密码'）；
我的错误=正确；
}
}
如果（$（'#phone'）.val（）！=''）{
如果（！validatePhoneNumber（$（'#phone'）.val（））{
$（“#电话”）.parent（）.append（'请提供正确的电话号码'）；
我的错误=正确；
}
}
if（$（“#地址选项：选中”）.val（）=''）{
$（“#地址”）.parent（）.append（'请选择一项'）；
我的错误=正确；
}
如果（$（':radio[name=“sex”]：checked'）。长度==0）{
$（'：radio[name=“sex”]：first'）.parent（）.after（'请选择一项'）；
我的错误=正确；
}
如果（$（'：radio[name=“subscription”]：checked'）。长度==0）{
$（'：radio[name=“subscription”]：first'）.parent（）.after（'请选择一项'）；
我的错误=正确；
}
if（$（'#likes选项：selected'）.val（）=''）{
$（'#likes'）.parent（）.append（'请选择一项'）；
我的错误=正确；
}
如果（我的错误）{
返回false；
}
否则{
e、 预防默认值（）；
var my_submission_array=$（'#form'）.serialize（）.split（'&'）；
如果（my_submission_array.length>0）{
$（'my#u submission'）.html（'submisted Elements
'）；
对于（var i=0；iul'）。追加（'my_pair[0]+'：'my_pair[1]+'\n'）；
}
}
}
});
});
// });
输出：
我的问卷
你应该怎么称呼？
请选择一个
先生
夫人
错过
博士
公共关系。
性别:
男性
女性
姓氏：
名字：
电邮：
密码：
电话号码：
你喜欢什么？
请选择一个
程序设计
非洲文学
诗
跳舞
你想收到我们的通讯吗？
对
不
在下面写一些评论：

在我继续回答之前，我应该注意到您将jQuery脚本放在了

标记之前。这是不正确的。它必须在

因此，您可能希望这样做：

$('#email').on('blur', function() {
    var emailVal = $(this).val();
    if (!emailVal || !myValidateEMailAddress(emailVal)) {
        $(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
        my_errors = true;
    }
});

$（'#email'）。在（'blur'，function（）上{
var emailVal=$（this.val（）；
如果（！emailVal | |！myValidateEMailAddress（emailVal））{
$（this.parent（）.append（'请提供正确的电子邮件地址'）；
我的错误=正确；
}
});

---

代码的其余部分可能看起来很相似。

非常感谢。我将分别对它们进行处理，看看它们是如何单独工作的。我尝试了一些东西，但模糊对任何元素都不起作用，我不知道为什么。

$('input').on('blur', function() {
    // your code here
});

$('#email').on('blur', function() {
    var emailVal = $(this).val();
    if (!emailVal || !myValidateEMailAddress(emailVal)) {
        $(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
        my_errors = true;
    }
});