<分区>
<分区>
我正在为我目前正在上的类(class)设计一个网站。此类需要 JavaScript 来验证表单客户端。除了必须使用 JavaScript 来验证表单之外，它没有任何先决条件。
我已经尝试了各种代码、脚本和调整我的 HTML 的尝试，但我似乎无法弄清楚如何做到这一点。潜在的问题是我对 JavaScript 一无所知，对 HTML/CSS 也知之甚少。
这是我的 HTML 表单(和 CSS 格式)。这是一个简单的表格，包含姓名、电子邮件地址和评论框。该网站不需要实际运行，因此没有连接服务器端处理或任何东西。只是简单的验证。
HTML
<form method="post" onsubmit="return validateForm()" action="demo_form.asp"
action="http://webdevfoundations.net/scripts/formdemo.asp" >
<div class="myRow">
<p style="color: #cc6600; padding-left: 50px;"><b>Get Our Newsletter!</b></p>
<label style="color: #cc6600;" class="labelCol" for="myName"><b>Name:</b></label>
<input type="text" name="myName" id="myName" />
</div>
<div class="myRow">
<label style="color: #cc6600;" class="labelCol" for="myEmail"><b>E-mail:</b>
</label>
<input type="text" name="myEmail" id="myEmail" />
</div>
<div>
<label style="color: #cc6600;" class="labelCol" for="myComments"><b>Comments:</b>
</label>
<textarea name="myComments" id="myComments" rows="1" cols="30">
</textarea>
</div>
<div class="mySubmit">
<input type="submit" value="Get Newsletter" />
</div>
</form>
</div>
这是我用来格式化它的 CSS
#myForm
{ color: #ffffff;
font-family: 'PT Sans', sans-serif;
width: auto;
padding: 15px;
min-width: 400px;
}
.myRow
{ padding-bottom: 20px;
}
.mySubmit
{ margin-top: 10px;
margin-left: 110px;
}
.labelCol
{ float: left;
width: 100px;
text-align: right;
padding-right: 10px;
}
我不确定如何添加脚本部分来简单地验证:输入了名称并且电子邮件地址有一个“@”和一个“.”作为有效的电子邮件地址。这是提供给我的示例代码，但我不知道如何实现它:
http://www.w3schools.com/js/js_form_validation.asp
抱歉，如果这是一团糟，如果我的 HTML 是一场灾难。第一次做网站!
最佳答案
你不需要使用 javascript现在用于客户端验证。 HTML5内置了用于客户端验证的属性和类型。
例如，用于检查@和 .在电子邮件地址中，您可以使用 <input type=email> .
如果要检查空白字段，可以使用 required 属性:
<input type="email" required>
有关 HTML5 中的更多输入类型,读一个classic article on HTML doctor .
One more article on HTML5 rocks
但是，如果您只想使用 javascript 进行客户端验证，请参阅 client side validation using JS and DOM 上的这篇文章会有用的。
使用 JS 的客户端电子邮件验证示例:
接受一个 html 文本输入和一个按钮输入，如下所示:
<form>
<input type='text' id='txtEmail'/>
<input type='submit' name='submit' onclick='Javascript:checkEmail();'/>
</form>
现在，当单击按钮时，JavaScript 函数 Submit()将被调用。现在在 head 中编写以下代码部分。
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}</script>
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/是电子邮件地址的正则表达式模式...很难在这里解释... Please see this link for more information .
在函数中，test() filter.test(email.value) 中的方法检查模式匹配。如果条件为相应的匹配/不匹配对返回 bool 值(true 或 false)。
关于javascript - 客户端 HTML 表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24843511/