表单HTML
<form action="" method="post">
<fieldset class="login">
<legend>Login information</legend>
<label for="userName" class="hover">UserName:</label>
<input type="text" id="userName" class="required text" /><br />
<label for="password" class="hover">Password:</label>
<input type="text" id="password" class="required text" /><br />
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="name" class="hover">Name:</label>
<input type="text" id="name" class="required text" /><br />
<label for="email" class="hover">Email:</label>
<input type="text" id="email" class="required text email" /><br />
<label for="date" class="hover">Date:</label>
<input type="text" id="date" class="required text" /><br />
<label for="url" class="hover">Website:</label>
<input type="text" id="url" class="url text" value="http://" /><br />
<label for="phone" class="hover">Phone:</label>
<input type="text" id="phone" class="phone text" /><br />
<label for="age" class="hover">Age:</label>
<input type="checkbox" id="age" name="age" value="yes" /><br />
<input type="submit" value="Submit Form" class="submit" />
</fieldset>
</form>
表单的CSS样式
form {
font-family: Arial;
font-size: 14px;
width: 300px;
}
fieldset {
border: 1px solid #ccc;
margin-bottom: 10px;
}
fieldset.login input {
width: 125px;
}
legend {
font-weight: bold;
font-size: 1.1em;
}
label {
display: block;
width: 60px;
text-align: right;
float: left;
padding-right: 10px;
margin: 5px 0;
}
input {
margin: 5px 0;
}
input.text {
padding: 0 0 0 3px;
width: 172px;
}
input.submit {
margin: 15px 0 0 70px;
}
ul.errors {
list-style: none;
background: #ffcece;
padding: 3px;
margin: 3px 0 3px 70px;
font-size: 0.9em;
width: 165px;
}
表单JavaScript
var errMsg = {
//检查特定字段是否必填
required: {
msg: 'This field is required.',
test: function (obj, load) {
return obj.value.length > 0 && obj.value != obj.defaultValue;
}
},
//确保字段内容是正确的email地址
email: {
msg: 'Not a valid email address.',
test: function (obj) {//确保有内容的输入并符合email地址的格式
return !obj.value || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
}
},
//确保字段内容是电话号码并将其自动格式化
phone: {
msg: 'Not a valid phone number',
test: function (obj) {
var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
if (m) {
obj.value = "(" + m[1] + ")" + m[2] + "-" + m[3];
return !obj.value || m;
}
}
},
//确保字段内容符合MM/DD/YYYY的时间格式
date: {
msg: 'Not a valid date.',
test: function (obj) {
return !obj.value || /^\d{2}\/d{2}\/d{2,4}$/.test(obj.value);
}
},
url: {
msg: 'Not a valid URL.',
test: function (obj) {
return !obj.value || obj.value == 'http:://' ||
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
}
};
//隐藏当前正在显示的任何错误信息
function hideErrors(elem) {
var next = elem.nextSibling;//获取当前字段的下一个元素
if (next && next.nodeName == 'UL' && next.className == 'errors') {//如果下一个元素是ul并有class为errors
elem.parentNode.removeChild(next);//删掉它
}
}
//显示表单内特定字段的错误信息
function showErrors(elem, errors) {
var next = elem.nextSibling;//获取当前字段的下一个元素
if (next && (next.nodeName != 'UL' || next.className != 'errors')) {
next = document.createElement('ul');
next.className = 'errors';
elem.parentNode.insertBefore(next, elem.nextSibling);
}
//有一个包含错误的容器引用，我们可以遍历所有的错误信息
for (var i = 0; i < errors.length; i++) {
var li = document.createElement('li');//为每一个错误信息创建新的li包裹器
li.innerHTML = errors[i];
next.appendChild(li);//并插入到dom中
}
}
//验证表单所有字段的函数
//form参数应是一个表单元素的引用
//load参数应该是一个布尔值 用以判别验证函数在页面加载时执行还是动态执行
function validateForm(form, load) {
var valid = true;
for (var i = 0; i < form.elements.length; i++) {//遍历表单的所有字段的一个数组
hideErrors(form.elements[i]);//先将所有错误信息隐藏
if (!validateField(form.elements[i], load)) {
valid = false;
}
}
return valid;//如果字段是不正确的内容，则返回false,反之则返回true;
}
//验证单个字段的内容
function validateField(elem, load) {
var errors = [];
for (var name in errMsg) {
var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
if (re.test(elem.className) && !errMsg[name].test(elem, load)) {//如果没有通过验证，把错误信息增加到列表中
errors.push(errMsg[name].msg);
}
}
if (errors.length) {//如果存在错误信息，则显示出来
showErrors(elem, errors);
}
return errors.length > 0;
}
function getInputsByName(name) {
var result = [];//匹配的input元素的数组
result.numChecked = 0;//追踪被选中元素的数量
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
if (input[i].name == name) {//找出所有指定name的字段
result.push(input[i]);//保存结果
if (input[i].checked) {//记录被选中字段的数量
result.numChecked++;
}
}
}
return result;//返回匹配的字段集合
}
window.onload = function () {
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function () {
validateForm(form, 'submit');
return false;
}
}
来源：https://www.cnblogs.com/liyunhua/p/4526222.html