表单验证提交和名称和城市提交输出中首字母大写
Form validation submission and First letter capitalized in output of submission of Name and City
大家好,这是最后一次求助我的表单验证提交。当我验证失败时,表单仍会提交。我需要知道如何在我连一次验证都失败的情况下停止提交表单。
如果可能的话,我需要在提交时按以下格式打印出“姓名”和“城市”字段。
Name: Namestring
City: Citystring
在“Name”和“City”的字符串中,必须以大写字母开头,后跟所有小写字母。
例如,如果用户键入“peTer. ”和城市框中的“Philadelphia”,输出消息应将它们显示为:Peter 或 City。通过提交时的输出,第一个字母必须始终是大写字母。基本上,无论我如何在输出的名称和城市字段中输入,第一个字母都是大写的,其余字母是小写的。
function doClear()
{
document.PizzaForm.customer.value ="";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value="PA";
document.PizzaForm.zip.value="";
document.PizzaForm.phone.value="";
document.PizzaForm.email.value="";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
}
function validateMe() {
if ( !(validateText() && validateRadio() && validateTops()) ) {
return false;
}
var toppings = ""
for(i=0;i<document.PizzaForm.toppings.length;i++){
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
}
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + toppings);
return;
}
function validateText()
{
var customer = document.PizzaForm.customer.value;
if (customer.length == 0)
{
alert("Please enter your name.")
}
var address = document.PizzaForm.address.value;
if (address.length == 0)
{
alert("Please enter your address.")
}
var city = document.PizzaForm.city.value;
if (city.length == 0)
{
alert("Please enter your city.")
}
var state = document.PizzaForm.state.value;
if (state.length == 0)
{
alert("Please enter your state.")
}
var zip = document.PizzaForm.zip.value;
if (document.PizzaForm.zip.value == "" ||
isNaN( document.PizzaForm.zip.value ) ||
document.PizzaForm.zip.value.length != 5 )
{
alert("Please enter the required zip code format.")
}
var phone = document.PizzaForm.phone.value;
if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) {
alert("Please enter the correct phone format xxx-xxx-xxxxx.");
}
var email = document.PizzaForm.email.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter a valid email address.")
return false;
}
return true;
}
function validateRadio()
{
if (document.PizzaForm.sizes[0].checked) return true;
if (document.PizzaForm.sizes[1].checked) return true;
if (document.PizzaForm.sizes[2].checked) return true;
if (document.PizzaForm.sizes[3].checked) return true;
if (document.PizzaForm.sizes.value == false);
{
alert("Please select a pizza size.");
}
return;
}
function validateTops()
{
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppings[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
{
alert("Please select a topping of your choice.");
}
return false;
return true;
}
</script>
</head>
<body>
<form name="PizzaForm" onsubmit="return validateMe()">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your Name, Address, City, State Phone number, and Email:</h4>
<font face ="Courier New">
Name: <Input name="customer" size="50" type="text"><br>
Address: <Input name="address" size="50" type="text"><br>
City: <Input name="city" size="15"type="text">
State:<select name="state">
<option value="">Select</option>
<option value="PA">PA</option>
<option value="NJ">NJ</option>
<option value="NY">NY</option>
<option value="DE">DE</option>
</select>
Zip:<Input name="zip" size="7"type="text"><br>
Phone: <Input name="phone" size="50"type="text"><br>
Email: <Input name="email" size="31"type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain<br>
</font>
</p>
<!--
========================================================
The submit and clear form buttons below.
========================================================
-->
<input type="button" value="Submit Order" onClick="Submit Order">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>
</html>
我需要能够满足我的要求的最小代码。 Java 仅脚本而非 JQuery 因为我在该领域没有经验。
谢谢大家
利用表单的 onsubmit 属性。
HTML:
<form onsubmit="return validateMe()">
<!-- whatever fields go here -->
</form>
Javascript:
function validateMe() {
// Return false if invalid input.
if ( !(validateText() && validateRadio() && validateTops()) ) {
return false;
}
// Otherwise, we're planning on submitting the form.
// Alert a confirmation and return true.
var toppings = "";
for(i=0;i<document.PizzaForm.toppings.length;i++){
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
}
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + toppings);
return true;
}
将您的 "Submit Order" 按钮更改为:
<input type="submit" value="Submit Order">
并且您可以完全删除 doSubmit 函数。
到字符串首字母大写:
function capitalizeString(stringToCapitalize) {
var words = stringToCapitalize.split(' ');
for (var i=0, il=words.length; i<il; i++) {
if (words[i].length > 0) {
words[i] = words[i].charAt(0).toUpperCase()
+ words[i].substring(1, words[i].length);
}
}
return words.join(' ');
}
对于城市:
alert("City: " + capitalizeString(document.PizzaForm.city.value));
大家好,这是最后一次求助我的表单验证提交。当我验证失败时,表单仍会提交。我需要知道如何在我连一次验证都失败的情况下停止提交表单。
如果可能的话,我需要在提交时按以下格式打印出“姓名”和“城市”字段。
Name: Namestring
City: Citystring
在“Name”和“City”的字符串中,必须以大写字母开头,后跟所有小写字母。
例如,如果用户键入“peTer. ”和城市框中的“Philadelphia”,输出消息应将它们显示为:Peter 或 City。通过提交时的输出,第一个字母必须始终是大写字母。基本上,无论我如何在输出的名称和城市字段中输入,第一个字母都是大写的,其余字母是小写的。
function doClear()
{
document.PizzaForm.customer.value ="";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value="PA";
document.PizzaForm.zip.value="";
document.PizzaForm.phone.value="";
document.PizzaForm.email.value="";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
}
function validateMe() {
if ( !(validateText() && validateRadio() && validateTops()) ) {
return false;
}
var toppings = ""
for(i=0;i<document.PizzaForm.toppings.length;i++){
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
}
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + toppings);
return;
}
function validateText()
{
var customer = document.PizzaForm.customer.value;
if (customer.length == 0)
{
alert("Please enter your name.")
}
var address = document.PizzaForm.address.value;
if (address.length == 0)
{
alert("Please enter your address.")
}
var city = document.PizzaForm.city.value;
if (city.length == 0)
{
alert("Please enter your city.")
}
var state = document.PizzaForm.state.value;
if (state.length == 0)
{
alert("Please enter your state.")
}
var zip = document.PizzaForm.zip.value;
if (document.PizzaForm.zip.value == "" ||
isNaN( document.PizzaForm.zip.value ) ||
document.PizzaForm.zip.value.length != 5 )
{
alert("Please enter the required zip code format.")
}
var phone = document.PizzaForm.phone.value;
if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) {
alert("Please enter the correct phone format xxx-xxx-xxxxx.");
}
var email = document.PizzaForm.email.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter a valid email address.")
return false;
}
return true;
}
function validateRadio()
{
if (document.PizzaForm.sizes[0].checked) return true;
if (document.PizzaForm.sizes[1].checked) return true;
if (document.PizzaForm.sizes[2].checked) return true;
if (document.PizzaForm.sizes[3].checked) return true;
if (document.PizzaForm.sizes.value == false);
{
alert("Please select a pizza size.");
}
return;
}
function validateTops()
{
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppings[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
{
alert("Please select a topping of your choice.");
}
return false;
return true;
}
</script>
</head>
<body>
<form name="PizzaForm" onsubmit="return validateMe()">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your Name, Address, City, State Phone number, and Email:</h4>
<font face ="Courier New">
Name: <Input name="customer" size="50" type="text"><br>
Address: <Input name="address" size="50" type="text"><br>
City: <Input name="city" size="15"type="text">
State:<select name="state">
<option value="">Select</option>
<option value="PA">PA</option>
<option value="NJ">NJ</option>
<option value="NY">NY</option>
<option value="DE">DE</option>
</select>
Zip:<Input name="zip" size="7"type="text"><br>
Phone: <Input name="phone" size="50"type="text"><br>
Email: <Input name="email" size="31"type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain<br>
</font>
</p>
<!--
========================================================
The submit and clear form buttons below.
========================================================
-->
<input type="button" value="Submit Order" onClick="Submit Order">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>
</html>
我需要能够满足我的要求的最小代码。 Java 仅脚本而非 JQuery 因为我在该领域没有经验。
谢谢大家
利用表单的 onsubmit 属性。
HTML:
<form onsubmit="return validateMe()">
<!-- whatever fields go here -->
</form>
Javascript:
function validateMe() {
// Return false if invalid input.
if ( !(validateText() && validateRadio() && validateTops()) ) {
return false;
}
// Otherwise, we're planning on submitting the form.
// Alert a confirmation and return true.
var toppings = "";
for(i=0;i<document.PizzaForm.toppings.length;i++){
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
}
alert("Name:" + " " + document.PizzaForm.customer.value +
'\n' +
"Address:" + " " + document.PizzaForm.address.value +
'\n' +
"City:" + " " + document.PizzaForm.city.value +
'\n' +
"State:" + " " + document.PizzaForm.state.value +
'\n' +
"Zip:" + " " + document.PizzaForm.zip.value +
'\n' +
"Phone:" + " " + document.PizzaForm.phone.value +
'\n' +
"Email:" + " " + document.PizzaForm.email.value +
'\n' +
"Size:" + " " + document.PizzaForm.sizes.value +
'\n' +
"Toppings:" + " " + toppings);
return true;
}
将您的 "Submit Order" 按钮更改为:
<input type="submit" value="Submit Order">
并且您可以完全删除 doSubmit 函数。
到字符串首字母大写:
function capitalizeString(stringToCapitalize) {
var words = stringToCapitalize.split(' ');
for (var i=0, il=words.length; i<il; i++) {
if (words[i].length > 0) {
words[i] = words[i].charAt(0).toUpperCase()
+ words[i].substring(1, words[i].length);
}
}
return words.join(' ');
}
对于城市:
alert("City: " + capitalizeString(document.PizzaForm.city.value));