运用javascript制作弹出式表单获取用户输入数据及验证的

有两个主题：

一是接收数据：The JavaScript prompt - Getting user input；

二是验证数据：Create JavaScript Input Text Validation Fields

以"javascript""input"为关健字在google中搜索到这个方法如下：

http://www.webdevelopersnotes.com/tutorials/javascript/javascript_prompt_visitor_inputs.php3

The JavaScript prompt - Getting user input

The JavaScript prompt - Getting user inputGo to The JavaScript prompt - Getting user inputJavaScript TutorialGo to JavaScript TutorialWeb Development TutorialsGo to Web Development TutorialsHomepage

The JavaScript prompt - Getting user input

Welcome mdx

In this session we'll look at the JavaScript prompt. The prompt() is a method of the window object, just like alert() or confirm().

The format for prompt() is similar to alert() or confirm() except for one addition.

prompt("Message", "default value in the text field");

In addition to the "OK" and "Cancel" buttons, a prompt box also has a text field that is employed for gathering visitor input. JavaScript lets you specify a default text for this text field. This is optional, that is you can construct a prompt() without specifing the default text. In such cases, JavaScript displays an ugly "undefined" value in the text field.

The information submitted by the visitor from prompt() can be stored in a variable, just as we had stored the value returned by confirm().

var name = prompt("What is your name", "Type you name here");

Once we have the value, we can write a customized greeting using document.write() as I have done or display an alert box.

var name = prompt("What is your name", "Type you name here");

alert("Hi " + name + "\nHope you are enjoying JavaScript!");

Click here to test the code.

It's important to remember that the value returned by prompt() and subsequently stored in a variable will always be a string data type. This is fine if you are dealing with text, but might present problems to the code if you plan to receive numeric data through prompt(). Javascript provides two functions to convert this string value to a numeric data type; parseInt() and parseFloat().

The parseInt() converts a string to an integer value while parseFloat() parses the string converting it to a floating point number.

Note: An integer is a whole number without any fractional part while floating-point numbers have a decimal part.

Now let's write a small script that takes a number from the visitor, checks whether its odd or even and displays the result through an alert box.

var n = prompt("Check your number", "Type your number here");

n = parseInt(n);

if (n == 0)

   {

   alert("The number is zero");

   }

else if (n%2)

   {

   alert("The number is odd");

   }

else

   {

   alert("The number is even");

   }

Click here to test the code

When parseInt() or parseFloat() encounter alphabet or any non-digit character, parsing (conversion) stops and the functions return NaN, which means Not a Number. The only way to test for NaN is to use isNaN() function.

We can make the code above more user-friendly by introducing one more if statement that checks for valid input.

Click here to test the code.

Assignments

   1. With which object would you associate the prompt() method?

   2. Prompt() takes two arguments. Where are they displayed?

   3. The input from a prompt() is of which data type?

   4. What is the function of parseFloat() and parseInt()?

   5. What will be result if we send "abcd" through a prompt() input and pass it through parseInt()?

   6. What is the use of isNaN()?

如这是测试页面：

<HTML>

<HEAD>

<TITLE>JavaScript</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">



var name = prompt("What is your name", "Type you name here");

alert("Hi " + name + "\nHope you are enjoying JavaScript!");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

在javascript进行数据有效性的验证：

http://www.codeave.com/javascript/code.asp?u_log=100

Create JavaScript Input Text Validation Fields

Limit the amount of traffic and empty form fields submitted to your site by stopping blank user input before it leaves the client. Server side form validation isn’t always the best answer. Whenever possible it is best to eliminate as much unwanted input as possible. The following script writer aids in that goal. Simply enter the number of text input fields that you need to ensure are not containing blank information, the names of the elements and copy the output code into your document. (Note: Blanks will be converted to the underscore and the use of special characters or numerics as field names will mess up your resultant output)

示例代码：

if (form.password.value == "")

{

alert("Please fill in the password field.");

form.password.focus();

return (false);

}

return (true);

}

//-->

</script>

<form method="post" action="where_ever_you_want.htm" onsubmit="return Blank_TextField_Validator(this)">

<p>

password

<br>

<input type="text" name="password" >

<br>