个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
嗨，我的脚本正在运行，然后我通过 w3 验证器运行它并更改了我告诉我错误的内容，现在它在第一个邮政编码处停止验证，我已经塞满了，不记得更改了什么，学到了做一件事有一段时间，我一直在努力让它再次工作，但不知道如果有人能花时间看看它，我将不胜感激，谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
function populatedropdown(dayfield, monthfield, yearfield) {
var today = new Date()
var dayfield = document.getElementById(dayfield)
var monthfield = document.getElementById(monthfield)
var yearfield = document.getElementById(yearfield)
for (var i = 0; i < 31; i++)
dayfield.options[i] = new Option(i, i + 1)
dayfield.options[today.getDate()] = new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m = 0; m < 12; m++)
monthfield.options[m] = new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()] = new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear = today.getFullYear()
for (var y = 0; y < 20; y++) {
yearfield.options[y] = new Option(thisyear, thisyear)
thisyear += 1
}
yearfield.options[0] = new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form() {
valid = true;
// validate name
/* if ( document.input.name.value == "" )
{
alert ( "Please enter your name" );
valid = false;
}
// validate address
if ( document.input.address.value == "" )
{
alert ( "Please enter your address address" );
valid = false;
}
// validate suburb town
if ( document.input.town.value == "" )
{
alert ( "Please enter your Suburb or town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
*/
// validate home phone
var y = document.getElementById('hphone').value;
if (isNaN(y) || y.indexOf(" ") != -1) {
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length > 10 || y.length < 10) {
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if (isNaN(y) || y.indexOf(" ") != -1) {
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length > 10 || y.length < 10) {
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if (isNaN(y) || y.indexOf(" ") != -1) {
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length > 10 || y.length < 10) {
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x = document.forms["input"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ((o.checked == false) && (t.checked == true)) {
// validate alternative address
if (document.input.street.value == "") {
alert("Please enter alternative address address");
valid = false;
}
// validate suburb town
if (document.input.suburb.value == "") {
alert("Please enter alternative Suburb or town");
valid = false;
}
} // validate postcode
var y = document.getElementById('postcode2').value;
if (isNaN(y) || y.indexOf(" ") != -1) {
alert("Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length > 4 || y.length < 4) {
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
// validate message box
var o = document.getElementById('card');
if ((o.checked == true)) {
if (document.input.message.value == "") {
alert("Please enter message");
valid = false;
}
return valid;
}
}
</script>
</head>
<body> <b>Order form for Joe's Fruit Shop</B><br><br>
<b> * means you must fill in the details.</B><br><br>
<b>Your details:</b>
<br>
<br>
<!-- Beggining of Form -->
<form name="input" action="cal2.html" onsubmit="validate_form ()">
<!--name form -->* Name:
<input type="text" name="name" onclick="this.value='';" value="Enter your name with first">
<br>
<br>
<!-- Address form -->* Address:
<input type="text" name="address" onclick="this.value='';" value="Enter your street address">
<br>
<br>
<!-- Suburb state dropdown form-->* Suburb or Town:
<input type="text" name="town" onclick="this.value='';"
value="suburb">State:
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code form -->* Postcode:
<input type=text name="postcode" onclick="this.value='';" value="****">
<br>
<br>
<!-- Home phone form-->* Phone:
<input type=text name="hphone" onclick="this.value='';" value="x-xxxx-xxx">
<!-- work phone form -->Work phone
<input type=text name="wphone" onclick="this.value='';" value="x-xxxx-xxx">
<br>
<br>
<!-- Fax form-->*Fax:
<input type=text name="fax" onclick="this.value='';" value="0x-xxxx-xxx">
<!-- Email form-->Email address:
<input type=text name="email" onclick="this.value='';" onsubmit="return validateForm();"
value="Enter your current email">
<br>
<br>
<br>
<!-- credit card--> <b>Credit card details:</b>
<br>
<br>* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<B>Purchase details</B><br><br> <!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br><br><br>
* <B>Deliver to:</B>
<br><br>
<!-- Address Radio buttons-->
<input type='radio' id="rad1" name='radio' value='Home address' checked="checked">Home Address<br>
<input type='radio' id="rad2" name='radio' value='Other address'/>Other Address<br><br>
<!--other address-->
<!-- street form-->
Street <input type=text name="street" onclick="this.value='';" value="Street"><br><br>
<!-- Suburb form-->
Suburb <input type=text name="suburb" onclick="this.value='';" value="Suburb or town"><br><br>
<!-- State dropdown form-->
State <select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select><br><br>
<!-- post code form -->
Postcode:<input type=text name="postcode2" onclick="this.value='';" value="****"><br><br><br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br><br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" value="Yes">Yes<br><br>
Personal message on card: <textarea rows="10" name="message" cols="30" onclick="this.value='';" >Enter your personal message here</textarea><br><br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form>
</body>
</html>
最佳答案
您的脚本失败，因为您尝试通过 Id 获取元素并检查 null 的 value 属性。
var y = document.getElementById('hphone').value;
这会引发异常并退出，然后提交表单
给你的元素 ID 来匹配名称属性，应该没问题
<input type=text name="hphone" id="hphone" onclick="this.value='';" value="x-xxxx-xxx">
将您的 onsubmit 属性更改为以下内容以取消验证错误时提交
<form name="input" action="cal2.html" onsubmit="return validate_form ()">
要检查默认值，您可以添加数据属性并在验证中交叉检查该值。
* Phone: <input type=text name="hphone" id="hphone" onclick="this.value='';" data-default="x-xxxx-xxx" value="x-xxxx-xxx">
var element = document.getElementById('hphone');
var y = element.value;
var defValue = element.attributes["data-default"].value;
if(isNaN(y)||y.indexOf(" ")!=-1|| y === defValue )
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
如果您的目标是兼容 HTML5 的浏览器，则可以使用占位符属性。 http://www.w3schools.com/html5/att_input_placeholder.asp
关于javascript - 使用js验证表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13224899/
24
4
0
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之，我想将我的应用程序实现为单独的层，其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况？ 最佳答案 我认为您可以将
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序，并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据，然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中，我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时，会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近，我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中，papa先生在客户端有类
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我是一个图形新手，需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么，而我没有从 Konva 等基于 Canvas 的库中得到什么？ 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ，并希望能够查看当前登录的用户。最好和最快的方法是什么？ 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序，但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载，运行与 DOM 交互的 js 的最佳方式是什么，例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好，所以我一定是在 Gulp 中做错了什么。 除脚本外，所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件，例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发，我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序，如果我理解得很好，一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初，我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀！