验证此条件语句中的 Javascript 表单
Validating Javascript Form in this conditions statements?
我只是 5 学期的 IT 学生，刚刚开始学习 Web 编程，我必须在这样的条件下验证地址文本区域：
地址：
- 必须填写。
- 应超过 14 个字符。
- 必须以"街道"一词开头。
- 仅是字母数字。
<html>
<head>
<title>Baggy Bag Shop Membership Registration</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" lang="javascript">
function validasi() {
var nama = document.getElementById("nama");
var password = document.getElementById("password");
var konfirmasi = document.getElementById("konfirmasi");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var radio1 = document.getElementById("male").checked;
var radio2 = document.getElementById("female").checked;
var address = document.getElementById("address");
var agreement = document.getElementById("agreement");
if (nama.value == "") {
alert("Please fill in your name!");
return false;
}
if ((nama.value).length < 7) {
alert("Username must be more than 6 characters.");
return false;
}
if (password.value == "") {
alert("Please fill your password");
return false;
}
if ((password.value).length < 8) {
alert("Password length must be more than 7 characters.");
return false;
}
if (konfirmasi.value == "") {
alert("Enter the password confirmation!");
return false;
}
if (konfirmasi.value != password.value) {
alert("Password confirmation does not match!");
return false;
}
if (email.value == "") {
alert("Please enter your E-Mail address!");
return false;
}
var reg = /^([A-Za-z0-9_'-'.])+'@([A-Za-z0-9_'-'.])+'.([A-Za-z]{2,4})$/;
if (reg.test(email.value) == false) {
alert('Invalid email address');
return false;
}
if (phone.value == "") {
alert("Please fill out your phone number");
return false;
}
if (isNaN(phone.value)) {
alert("Invalid Phone number!");
return false;
}
if ((radio1 == "") && (radio2 == "")) {
alert("Please state your gender");
return false;
}
if (agreement.checked != 1) {
alert("You must agree to the terms and conditions");
return false;
}
}
</script>
</head>
<body>
<div id="container">
<div id="header">~Baggy Bag Shop~
<div id="logo">
<img src="handbag3.jpg" height="130px" width="300px" />
</div>
</div>
<div id="menu">
<h2> Menu</h2>
<h3><ul><li><a href="home.html">Home</a></li><br>
<li><a href="product.html">Products</a></li><br>
<li><a href="registration.html">Registration</a></li><br>
<li><a href="aboutus.html">About Us</a></li><br>
<li><a href="contactus.html">Contact Us</a></li> <ul></h3>
</div>
<div id="contentarea">
<h1>Create a membership for our newsletter and get special offers!</h1>
<form name="membership" action="afterregis.html" method="get" onsubmit="return validasi();">
<table align="center">
<tr>
<td>Name:</td>
<td>
<input type="text" name="nama" id="nama" placeholder="Enter Username" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" placeholder="Enter Password" />
</td>
</tr>
<tr>
<td>Confirm Password:</td>
<td>
<input type="password" name="konfirmasi" id="konfirmasi" placeholder="Confirm your Password" />
</td>
</tr>
<tr>
<td>E-mail Address:</td>
<td>
<input type="text" name="email" id="email" placeholder="Enter an Email Address" />
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" />
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" id="male" value="male" />Male
<input type="radio" name="gender" id="female" value="female" />Female</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea cols="30" rows="4"></textarea>
</td>
</tr>
<tr>
<td>Terms & Condition:</td>
<td>
<textarea rows="4" cols="50" readonly>By becoming a member, your data will be used for the sole purpose of Baggy Bag Shop in anyway, including selling it to a third party.</textarea>
<br>
<input type="checkbox" name="agreement" id="agreement" />I Agreed with the above Terms & Conditions.</td>
</tr>
<tr>
<td align="right">
<input type="submit" id="submit" name="submit" value="SUBMIT" onclick="return validasi" />
</td>
<td align="left">
<input type="reset" id="reset" name="reset" value="RESET" />
</td>
</tr>
</table>
</form>
</div>
<div id="footer">
<p>Copyright©2014</p>
</div>
</div>
</body>
</html>
- 切勿将表单对象称为"提交" 切勿将事件处理程序添加到提交
- 按钮，而是将其添加到表单提交事件
- 您有两个验证，一个在按钮上，一个在提交事件上内联
以下是在 onload 事件中添加事件的方法 - 另请注意，我在文本区域添加了 id="address"，并修复了性别按钮和协议复选框的布尔值测试
window.onload = function() {
document.getElementById("membership").onsubmit = function() {
var nama = document.getElementById("nama");
var password = document.getElementById("password");
var konfirmasi = document.getElementById("konfirmasi");
var email = document.getElementById("email");
var phone = document.getElementById("phone");
var radio1 = document.getElementById("male").checked;
var radio2 = document.getElementById("female").checked;
var address = document.getElementById("address");
var agreement = document.getElementById("agreement");
if (nama.value == "") {
alert("Please fill in your name!");
return false;
}
if (nama.value.length < 7) {
alert("Username must be more than 6 characters.");
return false;
}
if (password.value == "") {
alert("Please fill your password");
return false;
}
if (password.value.length < 8) {
alert("Password length must be more than 7 characters.");
return false;
}
if (konfirmasi.value == "") {
alert("Enter the password confirmation!");
return false;
}
if (konfirmasi.value != password.value) {
alert("Password confirmation does not match!");
return false;
}
if (email.value == "") {
alert("Please enter your E-Mail address!");
return false;
}
var reg = /^([A-Za-z0-9_'-'.])+'@([A-Za-z0-9_'-'.])+'.([A-Za-z]{2,4})$/;
if (reg.test(email.value) == false) {
alert('Invalid email address');
return false;
}
if (phone.value == "") {
alert("Please fill out your phone number");
return false;
}
if (isNaN(phone.value)) {
alert("Invalid Phone number!");
return false;
}
if (!radio1 && !radio2) {
alert("Please state your gender");
return false;
}
if (address.value == "") {
alert("Please fill your address");
return false;
}
if (address.value.length < 14) {
alert("Address length must be more than 14 characters.");
return false;
}
if (address.value.indexOf("Street")==-1) {
alert("Address must start with '"Street'".");
return false;
}
if (!agreement.checked) {
alert("You must agree to the terms and conditions");
return false;
}
return true; // allow submit
}
}<div id="container">
<div id="header">~Baggy Bag Shop~
<div id="logo">
<img src="handbag3.jpg" height="130px" width="300px" />
</div>
</div>
<div id="menu">
<h2> Menu</h2>
<h3>
<ul>
<li><a href="home.html">Home</a></li><br>
<li><a href="product.html">Products</a></li><br>
<li><a href="registration.html">Registration</a></li><br>
<li><a href="aboutus.html">About Us</a></li><br>
<li><a href="contactus.html">Contact Us</a></li>
<ul>
</h3>
</div>
<div id="contentarea">
<h1>Create a membership for our newsletter and get special offers!</h1>
<form id="membership" action="afterregis.html" method="get">
<table align="center">
<tr>
<td>Name:</td>
<td>
<input type="text" name="nama" id="nama" placeholder="Enter Username" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" placeholder="Enter Password" />
</td>
</tr>
<tr>
<td>Confirm Password:</td>
<td>
<input type="password" name="konfirmasi" id="konfirmasi" placeholder="Confirm your Password" />
</td>
</tr>
<tr>
<td>E-mail Address:</td>
<td>
<input type="text" name="email" id="email" placeholder="Enter an Email Address" />
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" />
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" name="gender" id="male" value="male" />Male
<input type="radio" name="gender" id="female" value="female" />Female</td>
</tr>
<tr>
<td>Address:</td>
<td>
<textarea id="address" cols="30" rows="4"></textarea>
</td>
</tr>
<tr>
<td>Terms & Condition:</td>
<td>
<textarea rows="4" cols="50" readonly>By becoming a member, your data will be used for the sole purpose of Baggy Bag Shop in anyway, including selling it to a third party.</textarea>
<br>
<input type="checkbox" name="agreement" id="agreement" />I Agreed with the above Terms & Conditions.</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="SUBMIT" />
</td>
<td align="left">
<input type="reset" id="reset" name="reset" value="RESET" />
</td>
</tr>
</table>
</form>
</div>
<div id="footer">
<p>Copyright©2014</p>
</div>
</div>相关文章：
- 如何使用WCF服务和javascript表单post上传.doc文件
- 解析javascript表单验证器
- Javascript表单验证的缺点
- 动态Javascript表单不起作用
- 使用Ajax上传Javascript表单
- JavaScript表单验证-“;“错误”;不按需要工作
- JavaScript表单提交帮助
- HTML/Javascript表单会自动重置
- JavaScript表单提交没有't fire asp服务器端点击功能的提交按钮
- javascript表单验证-数值和密码
- 如何使用jsoup发布javascript表单
- 使用Javascript表单提交所需的HTML5
- JavaScript表单返回，但无法正常工作
- 使用HTML/Javascript表单使用ActiveXObject创建带有嵌入图像的outlook电子邮件
- 我如何使这个javascript表单验证DRYer
- Javascript表单验证-jsFiddle错误
- JavaScript 表单操作更改RC方法发布文本输入提交
- Javascript:表单验证getElementById仅返回第一个id元素
- JavaScript表单错误
- 使用 javascript 表单文本框内容
