使用jquery对多个表单进行通用电子邮件验证

Common Email validation for more than one forms using jquery

本文关键字：电子邮件 验证 表单 jquery 使用      更新时间：2023-09-26

我有一个表单

<form id="Register" method="post" onsubmit="return validateForm()">
     <p><label>Your Email</label><input type="text" name="email"/></p>
     <p style="margin-left:27%;"><input type="submit" name="submit" value="Submit" /></p>
</form>

我使用javascript验证这个表单是

function validateForm() {
var x = document.forms["Register"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
}
}

我有两张或两张以上的表格

 <form id="Login" method="post" >
    <p><label>Email</label><input type="text" name="Log_email" /></p>
    <p style="margin-left:27%;"><input type="submit" name="submit" value="Login" /></p>
 </form>
<form id="forgot" method="post">
<p><label>Your Email</label><input type="text" name="email"/></p>
<p style="margin-left:27%;"><input type="submit" name="submit" value="Submit" /></p>
</form>

如何为所有这些表单重写javascript验证。

如果在所有表单中使用相同的电子邮件名称，则从所有表单中调用带有"this.id"参数的validate函数

onsubmit="return validateForm(this.id)"

并修改代码：

function validateForm(id) {
var x = document.forms[id]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
}
}

JSFIDDLE：http://jsfiddle.net/g2frB/1/

JS代码：

$(".emlfrm").on("submit",function()
 {
        var x = $(this).find(".eml").eq(0).val();
        var atpos = x.indexOf("@");
        var dotpos = x.lastIndexOf(".");
        if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
            alert("Not a valid e-mail address");
            return false;
        }         
 });

HTML代码：

<form class="emlfrm" id="Login" method="post" >
    <p><label>Email</label><input type="text" class="eml" name="Log_email" /></p>
    <p style="margin-left:27%;"><input type="submit" name="submit" value="Login" /></p>
 </form>
<form class="emlfrm" id="forgot" method="post">
<p><label>Your Email</label><input type="text" class = "eml"name="email"/></p>
<p style="margin-left:27%;"><input type="submit" name="submit" value="Submit" /></p>
</form>

在您的电子邮件字段中添加一个类，并验证此项

相关文章：