使用window.onload的JavaScript表单验证 [英] Form Validation with Javascript using window.onload
问题描述
您好，我真的坚持这一点，因为我是一个javscript初学者，这使我的头脑。
有人知道如何写下面的JavaScript形式验证？
我相信这很简单，但我不能算出这一个来拯救我的生命。
谢谢你分享你的知识。 / p>
我需要写出以下表单验证的无jquery。每当遇到错误，防止提交表单。我需要使用window.onload函数来分配一个验证回调函数。有4个输入由javascript代码验证。此外，javascript需要在自己的文件中。
验证规则如下：
INPUT：必需（是）;验证（长度必须为5-10个字符）。
INPUT：电子邮件;必需（是）;验证（必须有@符号，必须有句点）。
INPUT：街道名称;必需（否）;验证（必须以数字开头）。
INPUT：出生年份;必需（是）;验证（必须为数字）。
我的代码如下所示：
HTML： / p>
<！DOCTYPE html>
< html>
< head>
< script defer =defertype =text / javascriptsrc =form.js>< / script>
< / head>
< body>
< form action =fake.php>
用户名*：< input type =textclass =requiredname =u/>< br />
电子邮件*：< input type =textclass =requiredname =p/>< br />
街道地址：< input type =textclass =numericname =s/>< br />
出生年份*：< input type =textclass =required numericname =b/>< br /
< input type =submit/>< br />
< / form>
< / body>
< / html>
JS
document.forms [0] .elements [0] .focus（）;
document.forms [0] .onsubmit = function（）{
for（var i = 0; i
var el = document.forms [0] .elements [i];
if（（el.className.indexOf（required）！= -1）&&
（el.value ==））{
alert（缺少必填字段）;
el.focus（）;
el.style.backgroundColor =yellow;
return false;
}
if（（el.className.indexOf（numeric）！= -1）&&
（isNaN（el.value）））{
alert（el.value +不是数字）;
el.focus（）;
el.style.backgroundColor =pink;
return false;
}
}
}
不改变你的代码...更新你的代码为其他验证，如长度（需要一个类verifylength验证长度）等。
试试此
HTML
< form action =fake.php>用户名*：
< input type =textclass =required verifylengthname =u/>
< br />电子邮件*：
< input type =textclass =required emailname =p/>
< br />街道地址：
< input type =textclass =numericname =s/>
< br />出生年份*：
< input type =textclass =required numericname =b/>
< br />
< input type =submit/>
< br />
< / form>
JAVASCRIPT
document.forms [0] .elements [0] .focus（）
document.forms [0] .onsubmit = function（）{
for（var i = 0; i
if（（el.className.indexOf（required）！= -1）&&（el.value ==））{
alert（missing required field）;
el.focus（）;
el.style.backgroundColor =yellow;
return false;
} else {
if（el.className.indexOf（verifylength）！= -1）{
if（el.value.length< 5 || el.value.length > 10）{
alert（'+ el.value +'必须是5-10个字符长）;
el.focus（）;
el.style.backgroundColor =pink;
return false;
}
}
}
if（el.className.indexOf（email）！= -1）{
var regEx = / ^ （[0-9a-zA-Z]（[ - 。\w] * [0-9a-zA-Z]）* -a] z] {2,9}）。
var emailTest = regEx.test（el.value）;
if（！emailTest）{
alert（email not valid）;
el.focus（）;
el.style.backgroundColor =yellow;
return false;
}
};
if（（el.className.indexOf（numeric）！= -1）&&（isNaN（el.value）））{
alert（el.value + 不是数字）;
el.focus（）;
el.style.backgroundColor =pink;
return false;
}
}
}
Hi there I am really stuck on this and since I am a javscript beginner this boggles my mind.
Is there someone who knows how to write the following javascript form validation? I am sure that it is very simple, but I can not figure this one out to save my life.
Thank you for you sharing your knowledge.
I need to write WITHOUT jquery the following form validation. Whenever an error is encountered, prevent the form from being submitted. I need to use the window.onload function to assign a validation callback function. There are 4 inputs which get validated by the javascript code. Also the javascript needs to be in its own file.
Validation Rules are as follow:
INPUT: Username; Required (yes); Validation (Must be 5-10 characters long). INPUT: Email; Required (yes); Validation (Must have an @ sign, must have a period). INPUT: Street name; Required (no); Validation (Must start with a number). INPUT: Year of birth; Required (yes); Validation (must be numeric).
My code looks as follow:
HTML:
<!DOCTYPE html>
<html>
<head>
<script defer="defer" type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="fake.php">
Username*: <input type="text" class="required" name="u"/><br/>
Email*: <input type="text" class="required" name="p"/><br/>
Street address: <input type="text" class="numeric" name="s"/><br/>
Year of birth*: <input type="text" class="required numeric" name="b"/><br/>
<input type="submit"/><br/>
</form>
</body>
</html>
JS
document.forms[0].elements[0].focus();
document.forms[0].onsubmit=function(){
for(var i = 0; i < document.forms[0].elements.length; i++){
var el = document.forms[0].elements[i];
if((el.className.indexOf("required") != -1) &&
(el.value == "")){
alert("missing required field");
el.focus();
el.style.backgroundColor="yellow";
return false;
}
if((el.className.indexOf("numeric") != -1) &&
(isNaN(el.value))){
alert(el.value + " is not a number");
el.focus();
el.style.backgroundColor="pink";
return false;
}
}
}
without changing much of your code ... updated your code for other validation like length (needs a class verifylength to validate length) and so on....
try this
HTML
<form action="fake.php">Username*:
<input type="text" class="required verifylength" name="u" />
<br/>Email*:
<input type="text" class="required email" name="p" />
<br/>Street address:
<input type="text" class="numeric" name="s" />
<br/>Year of birth*:
<input type="text" class="required numeric" name="b" />
<br/>
<input type="submit" />
<br/>
</form>
JAVASCRIPT
document.forms[0].elements[0].focus();
document.forms[0].onsubmit = function () {
for (var i = 0; i < document.forms[0].elements.length; i++) {
var el = document.forms[0].elements[i];
if ((el.className.indexOf("required") != -1) && (el.value == "")) {
alert("missing required field");
el.focus();
el.style.backgroundColor = "yellow";
return false;
} else {
if (el.className.indexOf("verifylength") != -1) {
if (el.value.length < 5 || el.value.length > 10) {
alert("'" + el.value + "' must be 5-10 charater long");
el.focus();
el.style.backgroundColor = "pink";
return false;
}
}
}
if (el.className.indexOf("email") != -1) {
var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
var emailTest = regEx.test(el.value);
if (!emailTest) {
alert("email not valid");
el.focus();
el.style.backgroundColor = "yellow";
return false;
}
};
if ((el.className.indexOf("numeric") != -1) && (isNaN(el.value))) {
alert(el.value + " is not a number");
el.focus();
el.style.backgroundColor = "pink";
return false;
}
}
}
这篇关于使用window.onload的JavaScript表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
