极客教程使用HTML和JavaScript进行表单验证
表单 用于网页上让用户输入所需信息，并发送到服务器进行处理。表单也被称为网络表单或HTML表单。例如，在电子商务网站、网上银行和在线调查中广泛应用了表单。
先决条件：
- HTML 用于创建表单。
- CSS 用于设计表单的布局。
- JavaScript 用于验证表单。
验证表单： 表单中输入的数据需要符合正确的格式，某些字段需要填写才能有效使用提交的表单。用户名、密码和联系信息是一些在表单中必填的详细信息，因此用户需要提供这些信息。
以下是一个用于验证表单的HTML、CSS和JavaScript代码段。
在下面的代码段中使用的验证：
// Javascript reGex for Email Validation.
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+/g;
var regPhone=/^\d{10}/; // Javascript reGex for Phone Number validation.
var regName = /\d+$/g; // Javascript reGex for Name validation
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Form validation using HTML and JavaScript
</title>
</head>
<body>
<h1 style="text-align: center;">
REGISTRATION FORM
</h1>
<form name="RegForm" onsubmit="return GEEKFORGEEKS()"
method="post">
<p>
Name:
<input type="text" size="65" name="Name" />
</p>
<br />
<p>
Address:
<input type="text" size="65" name="Address" />
</p>
<br />
<p>
E-mail Address:
<input type="text" size="65" name="EMail" />
</p>
<br />
<p>
Password:
<input type="text" size="65" name="Password" />
</p>
<br />
<p>
Telephone:
<input type="text" size="65" name="Telephone" />
</p>
<br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>GEEKFORGEEKS</option>
</select>
</p>
<br />
<br />
<p>
Comments:
<textarea cols="55" name="Comment"> </textarea>
</p>
<p>
<input type="submit" value="send" name="Submit" />
<input type="reset" value="Reset" name="Reset" />
</p>
</form>
</body>
</html>
CSS代码
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
Javascript代码
function GEEKFORGEEKS(){
var name =
document.forms.RegForm.Name.value;
var email =
document.forms.RegForm.EMail.value;
var phone =
document.forms.RegForm.Telephone.value;
var what =
document.forms.RegForm.Subject.value;
var password =
document.forms.RegForm.Password.value;
var address =
document.forms.RegForm.Address.value;
//Javascript reGex for Email Validation.
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+/g;
// Javascript reGex for Phone Number validation.
var regPhone=/^\d{10}/;
// Javascript reGex for Name validation
var regName = /\d+/g;
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}
if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();
return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;
}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
} {
var name =
document.forms.RegForm.Name.value;
var email =
document.forms.RegForm.EMail.value;
var phone =
document.forms.RegForm.Telephone.value;
var what =
document.forms.RegForm.Subject.value;
var password =
document.forms.RegForm.Password.value;
var address =
document.forms.RegForm.Address.value;
//Javascript reGex for Email Validation.
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+/g;
// Javascript reGex for Phone Number validation.
var regPhone=/^\d{10}/;
// Javascript reGex for Name validation
var regName = /\d+/g;
if (name == "" || regName.test(name)) {
window.alert("Please enter your name properly.");
name.focus();
return false;
}
if (address == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email == "" || !regEmail.test(email)) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (password == "") {
alert("Please enter your password");
password.focus();
return false;
}
if(password.length <6){
alert("Password should be atleast 6 character long");
password.focus();
return false;
}
if (phone == "" || !regPhone.test(phone)) {
alert("Please enter valid phone number.");
phone.focus();
return false;
}
if (what.selectedIndex == -1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
输出:
