使用regexp验证简单表单 [英] Using regexp to validate simple form

问题描述

我在阿拉斯加为孩子们开了一个小营地，我的导演要求提供网络表格。有人可以看看并提供一些关于我犯错误的建议吗？

我正在使用RegExp函数来验证3种类型的字段：文本，单选按钮，下拉式菜单。但代码没有验证。 2天后，我要求指导了。

标准：

文字：只有字母，没有数字，允许

收音机：必须选择一个，

下拉：必须选择一个选项。

电话号码：正好10位数。

电子邮件：只能来来自域名： .com ， .net ， .gov ，或 .edu （还没有被问到为什么？但这就是导演'的要求。


目标：

1.我不想要所有错误都出现在一个警报内，而是一次只有一个警报显示。更正一个输入错误后，再次单击提交后将出现下一个错误。例如，如果表单是空白的，则仅发送警报，请输入您的姓名。出现是因为它是第一个字段。


2.表格填写完毕后，会发出一条警告，上面写着感谢您填写表格。在SUBMIT按钮指向的新页面前弹出。


我是一名高级/初学者，正在追赶JS。 GENDER和CITY的VAR故意留空，原因很简单，因为我不知道如何输入正确的信息。

完整版的表格还有其他文字字段和单选按钮所以，如果我可以使这些验证工作，我会很高兴与其他人一起工作。

提前感谢您的见解。

JS和HTML如下：

TokyoJ


[HTML]< HTML> < HEAD>< TITLE>表格< / TITLE>

< script language =" javascript">

<！ -

function validate（） {

var fullname = document.module102form.fullname.value;

var gender = document.module102form.gender.value;

var country = document.module102form.city.value;

var email = document.module102form.email.value;


var fullnameRegExp = / \d /;

var genderRegExp = / /;

var countryRegExp = / /;

var emailRegExp = / ^ [@] || [.com] || [.net] || [.edu] || [.gov] / \ g;


if（fullnameRegExp.test（fullname）！= true）

alert（ 请重新输入您的全名。;

if（genderRegExp.test（gender）= unchecked）

alert（" Please select a GENDER。）;

if（countryRegExp .test（country）！= true）

alert（请选择一个城市。）;

if（emailRegExp.test（email）！= true）

alert（" Please valid） 。EMAIL"）;

else {


alert（感谢您填写表格。）;

document.module102.action.value =" http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php" ;;

}

}

// - >

< / script>

< / HEAD>

< BODY>

< FORM METHOD =" post"名称= QUOT; module102form" onSubmit =" return validate（this）;" ACTION =" http：//nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php">

<！ - START HTML - >

< TABLE>

< TR>

< TD>全名：< / TD>

< TD>< INPUT NAME =" fullname" TYPE ="文本"> < / TD>

< / TR>

< TR>

< TD>性别：< / TD>

< TD>< INPUT TYPE =" radio" NAME ="性别" VALUE ="男性"> MALE< INPUT TYPE =" radio" NAME ="性别" VALUE ="女" > FEMALE< / TD>

< / TR>

< TR>

< TD> COUNTRY：< / TD>

< TD>< SELECT NAME =" country">

< OPTION VALUE =" select">请选择一个城市< / option>

< OPTION VALUE =" anchorage"> Anchorage< / option>

< OPTION VALUE =" fairbanks">费尔班克斯< /选项>

< OPTION VALUE =" juneau">朱诺< /选项>

< / SELECT>< / TD>

< / TR>

< TR>

< TD>电子邮件：< / TD>

< TD>< INPUT NAME =" email" TYPE ="文本"> < / TD>

< / TR>

< / TABLE>

<！ - BUTTON - >

< tr>

< td> < INPUT TYPE =" submit" VALUE =" SEND DATA">< INPUT TYPE =" reset" VALUE =清除表格> < / td>

< / tr>

< / FORM>

< / BODY>

< / HTML> [/ HTML]

解决方案

嗨！我在你的javascript代码中做了一些修改。我不确定你想要检查什么全名，但你检查它是否包含一个数字，我很确定你没有看到:)现在它检查它是否是一个全名（exchandler bing或chandler bing bong）不仅仅是chandler。


性别实际上会返回一个数组，因为有两个同名的元素。你必须检查是否有任何一个被检查。


contry.value将返回select没有选择城市时我想它一直都是城市。


验证电子邮件很难，但这个小正则表达式只是检查结束。

展开 | 选择 | Wrap | 行号

Hagelbrakare，

谢谢。我正在清理我的大脑，所以你所做的改变是清楚的。


这是正确的onSubmit吗？

onSubmit =" return验证（this）;"

我不清楚

onSubmit =" return validate（this）;" 和

onSubmit =" return validate_form（）;"

和

onSubmit =" return validate（）;"

你能解释哪种形式最适合这种形式（简单来说）吗？

干杯，

John

我'对不起，我忘了告诉你。


如你所见，该函数被声明为function validate（）功能名称是meens，并且它不带参数（parentesis为空）。你可以通过validate（）调用它。 validate（）将返回true或false。 onsubmit应返回validate返回的内容。我知道这听起来有点太多了，但onsubmit =" return validate（）"将来这份工作。


欢迎你提出任意多的问题:) javascript函数中有什么东西让你感到困惑吗？

I run a small camp in Alaska for kids and my director is asking for a web form. Could someone please have a look and offer some advice on where I''m making mistake(s)?
I''m using the RegExp function to validate 3 types of fields: text, radio button, dropdown menu. but the code doesn''t validate. After 2 days, it''s time I asked for guidence.
Criteria:
Text: only alphabet, no numerals, allowed
Radio: one must be selected,
Dropdown: an option must be selected.
Phone number: exactly 10 digits.
Email: can only come from domains: .com, .net, .gov, OR .edu (haven''t yet asked ''why?'' but that''s what the director''s asking for)

Goal:
1. I don''t want all the errors to come up inside one alert, but rather have one alert show at a time. After one entry error is corrected, the next error will appear after clicking submit again. For example, if the form is sent blank, ONLY the Alert, "Please enter your name." appears because it is the first field.

2. Once the form is completed correctly, an alert saying, "Thank you for completing the form." pops up in front of the new page which the SUBMIT button leads to.

I''m an advanced/beginner catching up on JS. The VAR for GENDER and CITY have been left empty on purpose, simply because I don''t know how to enter the correct info.
There are other text fields and radio buttons in the full version of form so if I can get these validations to work, I''ll be good to go with the others.
Thank you in advance for your insight.
Both the JS and HTML are given below.
TokyoJ

[HTML]<HTML> <HEAD><TITLE> Form </TITLE>
<script language="javascript">
<!--
function validate (){
var fullname = document.module102form.fullname.value;
var gender = document.module102form.gender.value;
var country = document.module102form.city.value;
var email = document.module102form.email.value;

var fullnameRegExp=/\d/;
var genderRegExp=/ /;
var countryRegExp=/ /;
var emailRegExp=/^[@]||[.com]||[.net]||[.edu]||[.gov] /\g;

if (fullnameRegExp.test(fullname)!=true)

alert("Please reenter your FULL NAME.");

if (genderRegExp.test(gender)= unchecked)

alert("Please select a GENDER.");

if (countryRegExp.test(country)!=true)

alert("Please select a CITY.");

if (emailRegExp.test(email)!=true)

alert("Please valid EMAIL.");

else {

alert("Thanks for completing the form.");
document.module102.action.value="http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php";
}
}
//-->
</script>
</HEAD>
<BODY>
<FORM METHOD="post" name="module102form" onSubmit="return validate(this);" ACTION="http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php">
<!-- START HTML -->
<TABLE>
<TR>

<TD> FULL NAME: </TD>
<TD><INPUT NAME="fullname" TYPE="text"> </TD>

</TR>
<TR>

<TD> GENDER: </TD>
<TD><INPUT TYPE="radio" NAME="gender" VALUE="Male"> MALE <INPUT TYPE="radio" NAME="gender" VALUE="Female" > FEMALE </TD>

</TR>
<TR>

<TD>COUNTRY:</TD>
<TD><SELECT NAME="country">
<OPTION VALUE="select"> Please select a city</option>
<OPTION VALUE="anchorage"> Anchorage </option>
<OPTION VALUE="fairbanks"> Fairbanks</option>
<OPTION VALUE="juneau"> Juneau </option>
</SELECT></TD>

</TR>
<TR>

<TD> EMAIL: </TD>
<TD><INPUT NAME="email" TYPE="text"> </TD>

</TR>
</TABLE>
<!-- BUTTON -->
<tr>

<td> <INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"> </td>

</tr>
</FORM>
</BODY>
</HTML>[/HTML]

解决方案

Hi! I made a few changes in you javascript code. I''m not sure what you wanted to check when it comes to fullname, but you checked if it did not contain a digit which I''m quite sure you didn''t meen to :) Now it checks if it is a full name ( ex "chandler bing" or "chandler bing bong") not just "chandler".

Gender will actually return an array because there are two elements with same name. You have to check if either of them are checked.

contry.value will return "select" when no city is selected. I suppose that it should be city all the way.

validating an e-mail is hard, but this little regex just checks the end.

Expand|Select|Wrap|Line Numbers

Hagelbrakare,
Thank you. I''m dusting off my brain so the changes you made are clear.

So is this the correct onSubmit?

onSubmit="return validate(this);"

I''m not clear on the differences between

onSubmit="return validate(this);"

and

onSubmit="return validate_form();"

and

onSubmit="return validate();"

Could you explain which is best for this form(in simple terms)?
Cheers,
John

I''m sorry, I forgot to tell you.

As you can see the function is declared as "function validate()" which meens that functions name is validate and that it takes no arguments (the parentesis is empty). This meens that you should call it by validate(). validate() will return true or false. onsubmit should return what validate returns. I know that is sounds a little bit too much already, but onsubmit="return validate()" will to the job.

You are welcome to ask as many questions as you want :) Is there anything in the javascript function that puzzles you?

这篇关于使用regexp验证简单表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！