javascript学习笔记（十二）初始化表单，及对其简单验证
在web开发中，经常需要用户填写一些信息提交到数据库中，这个时候我们就会用到表单。对于前端来说，表单设计的好与不好直接影响到用户的体验。
以上已经达到重置表单的目的了，我们再来改善一下，当表单中的值为默认值时，我们以浅色显示，而当用户输入真实值时，以更明显的颜色来显示，主要目的是区分默认值和真实值。
在今天的学习笔记中，和大家一起来先设计一个表单，然后一步一步一类完善用户体验。
先看HTML代码：
<form method="post" action="#" name="register"> <p> <label for="user_name">用户名：</label> <input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs" /><span>*</span> </p> <p> <label for="email">邮 箱：</label> <input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs" /><span>*</span> </p> <p> <label for="mobile_phone">手机号：</label> <input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs" /><span>*</span> </p> <p> <label for="psw">登录密码：</label> <input type="password" value="" name="密码" id="psw" class="inputs" /><span>*</span> </p> <p> <label for="re_psw">确认密码：</label> <input type="password" value="" name="密码" id="re_psw" class="inputs" /><span>*</span> </p> <p> <input type="submit" value="注册" class="btn" /> </p> </form>
我们先来看代码中的"label"标签，当labels标签中的for属性值和input元素中的id值相同时，在前台页面中当我们点击元素的名称（文本）时，该元素就会被触发（获得焦点、选中）。这在表单元素可选区域不大的时候尤为起作用，比如单选按钮、多选按钮，供用户点击的区域并不大，如果设置了label，则用户直接点击元素的名称时，就会自动选中。所以设置label值还是很有意义的。
但是这个功能并不是所有的浏览器都支持。没有关系，我们可以用一个简单的js函数labelFocus()来实现。
function labelFocus() {
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++) {
var id = labels[i].getAttribute("for");
var element = document.getElementById(id);
element.onclick = function () {
this.focus();
}
}
}
再来看HTML代码中，每个input元素我们都定义了一个默认值，这样可以引导用户填写正确的信息。但是同样会造成一个麻烦就是用户要先把我们定义的默认值删掉，然后再去填写自己的信息。对于用户来说显然是不好的体验。这里我们可以这样改善，当该元素获得焦点时，自动消除我们定义的默认值，失去焦点时，如果用户什么都没有输入，则又还原为默认值。请看我们定义的resetFields()函数。
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
}
请看完整代码示例1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>forms elements -- by zhangchen</title>
<style type="text/css">
/*--common style--*/
* {
margin:0;
padding:0;
}
body {
font-family:'微软雅黑', verdana;
font-size:12px;
background-color:#EFFFDF;
}
.container {
width:960px;
margin:0 auto;
}
.header {
height:35px;
padding-top:30px;
background-color:#58A40D;
color:#ffffff;
}
.header h1 {
font-size:18px;
padding-left:15px;
}
.header h1 span {
float:right;
padding-right:15px;
font-size:14px;
padding-top:3px;
}
.content {
background-color:#ffffff;
padding:20px 30px;
min-height:460px;
*height:460px;
}
.footer {
margin-top:15px;
text-align:center;
}
/*--content style--*/
.content h2 {
font-size:16px;
margin-bottom:10px;
}
.content p {
padding:8px 0;
width:400px;
}
.content p span {
padding-left:8px;
color:red;
}
.content p label {
width:60px;
float:left;
text-align:right;
padding-top:3px;
}
.inputs {
height:23px;
line-height:23px;
border:1px solid #E3E9EF;
border-top:1px solid #ABADB3;
width:250px;
font-family:verdana;
}
.btn {
width:55px;
height:20px;
line-height:20px;
margin-left:60px;
border:none;
background-color:#58A40D;
color:#ffffff;
}
</style>
<script type="text/javascript">
function labelFocus() {
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++) {
var id = labels[i].getAttribute("for");
var element = document.getElementById(id);
element.onclick = function () {
this.focus();
}
}
}
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
}
}
}
}
}
window.onload = function() {
resetFields();
labelFocus();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1><span>2011-04-17 by zhangchen</span>javascript学习笔记（十二） 表单操作及简单验证</h1>
</div><!--header end-->
<div class="content">
<h2>注册表单</h2>
<form method="post" action="#" name="register">
<p>
<label for="user_name">用户名：</label>
<input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs" /><span>*</span>
</p>
<p>
<label for="email">邮 箱：</label>
<input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs" /><span>*</span>
</p>
<p>
<label for="mobile_phone">手机号：</label>
<input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs" /><span>*</span>
</p>
<p>
<label for="psw">登录密码：</label>
<input type="password" value="" name="密码" id="psw" class="inputs" /><span>*</span>
</p>
<p>
<label for="re_psw">确认密码：</label>
<input type="password" value="" name="密码" id="re_psw" class="inputs" /><span>*</span>
</p>
<p>
<input type="submit" value="注册" class="btn" />
</p>
</form>
</div><!--content end-->
<div class="footer">
<p>专注web前端技术 by zhangchen(WH)</p>
</div>
</div><!--container end-->
</body>
</html>
请看修改后的resetForms()函数：
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
this.setAttribute("class", "inputs");
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
this.setAttribute("class", "inputs default");
}
}
}
}
}
实现的原理主要是通过setAttribute方法来改变元素的class值，这里我可以再增加两个函数，addClass()和removeClass()，随时给元素增加或是移除class值。
function addClass(element, value) {
var oldClassName = element.className;
if (!oldClassName) {
element.className = value;
} else {
element.className+=" "+value;
}
}
function removeClass(element, value) {
var oldClassName = element.className;
var reg = eval("/\s*"+value+"/");
if (reg.test(oldClassName)) {
element.className = oldClassName.replace(reg, "");
}
}
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
addClass(element, "default");
//element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
if (this.value == this.defaultValue) {
this.value = "";
removeClass(this, "default");
//this.setAttribute("class", "inputs");
}
}
element.onblur = function() {
if (this.value == "") {
this.value = this.defaultValue;
addClass(this, "default");
//this.setAttribute("class", "inputs default");
}
}
}
}
}
有了addClass()和removeClass()这两个函数，我们可以很方便在任何位置使用了，比起setAttribute()函数来可读性要好。我们再来做一些改善，当文本框获取焦点时，我们让其高亮显示。
请看修改之后的resetForms()函数：
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
addClass(element, "default");
//element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
addClass(this, "focus");
if (this.value == this.defaultValue) {
this.value = "";
removeClass(this, "default");
//this.setAttribute("class", "inputs");
}
}
element.onblur = function() {
removeClass(this, "focus");
if (this.value == "") {
this.value = this.defaultValue;
addClass(this, "default");
//this.setAttribute("class", "inputs default");
}
}
}
}
}
请看完整示例代码2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>forms elements -- by zhangchen</title>
<style type="text/css">
/*--common style--*/
* {
margin:0;
padding:0;
}
body {
font-family:'微软雅黑', verdana;
font-size:12px;
background-color:#EFFFDF;
}
.container {
width:960px;
margin:0 auto;
}
.header {
height:35px;
padding-top:30px;
background-color:#58A40D;
color:#ffffff;
}
.header h1 {
font-size:18px;
padding-left:15px;
}
.header h1 span {
float:right;
padding-right:15px;
font-size:14px;
padding-top:3px;
}
.content {
background-color:#ffffff;
padding:20px 30px;
min-height:460px;
*height:460px;
}
.footer {
margin-top:15px;
text-align:center;
}
/*--content style--*/
.content h2 {
font-size:16px;
margin-bottom:10px;
}
.content p {
padding:8px 0;
width:400px;
}
.content p span {
padding-left:8px;
color:red;
}
.content p label {
width:60px;
float:left;
text-align:right;
padding-top:3px;
}
.inputs {
height:23px;
line-height:23px;
border:1px solid #E3E9EF;
border-top:1px solid #ABADB3;
width:250px;
font-family:verdana;
}
.default {
color:#9A9CA1;
}
.focus {
border:1px solid #70CF11;
}
.btn {
width:55px;
height:20px;
line-height:20px;
margin-left:60px;
border:none;
background-color:#58A40D;
color:#ffffff;
}
</style>
<script type="text/javascript">
function labelFocus() {
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++) {
var id = labels[i].getAttribute("for");
var element = document.getElementById(id);
element.onclick = function () {
this.focus();
}
}
}
function addClass(element, value) {
var oldClassName = element.className;
if (!oldClassName) {
element.className = value;
} else {
element.className+=" "+value;
}
}
function removeClass(element, value) {
var oldClassName = element.className;
var reg = eval("/\s*"+value+"/");
if (reg.test(oldClassName)) {
element.className = oldClassName.replace(reg, "");
}
}
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
addClass(element, "default");
//element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
addClass(this, "focus");
if (this.value == this.defaultValue) {
this.value = "";
removeClass(this, "default");
//this.setAttribute("class", "inputs");
}
}
element.onblur = function() {
removeClass(this, "focus");
if (this.value == "") {
this.value = this.defaultValue;
addClass(this, "default");
//this.setAttribute("class", "inputs default");
}
}
}
}
}
window.onload = function() {
resetFields();
labelFocus();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1><span>2011-04-17 by zhangchen</span>javascript学习笔记（十二） 表单操作及简单验证</h1>
</div><!--header end-->
<div class="content">
<h2>注册表单</h2>
<form method="post" action="#" name="register">
<p>
<label for="user_name">用户名：</label>
<input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs" /><span>*</span>
</p>
<p>
<label for="email">邮 箱：</label>
<input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs" /><span>*</span>
</p>
<p>
<label for="mobile_phone">手机号：</label>
<input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs" /><span>*</span>
</p>
<p>
<label for="psw">登录密码：</label>
<input type="password" value="" name="密码" id="psw" class="inputs" /><span>*</span>
</p>
<p>
<label for="re_psw">确认密码：</label>
<input type="password" value="" name="密码" id="re_psw" class="inputs" /><span>*</span>
</p>
<p>
<input type="submit" value="注册" class="btn" />
</p>
</form>
</div><!--content end-->
<div class="footer">
<p>专注web前端技术 by zhangchen(WH)</p>
</div>
</div><!--container end-->
</body>
</html>
以上我们已经完成了表单的初始化工作，现在我们对表单进行简单的验证，验证之前我们的html代码有部分改变，主要是input中class的值，当为必填字段时，class中添加"required"值，当还要进一步验证eamil或是手机号号时，我们需要在class中添加相应的"email"、"mobile_phone"值，请看修改后的html代码：
<form method="post" action="#" name="register"> <p> <label for="user_name">用户名：</label> <input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs required" /><span>*</span> </p> <p> <label for="email">邮 箱：</label> <input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs required email" /><span>*</span> </p> <p> <label for="mobile_phone">手机号：</label> <input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs required mobile" /><span>*</span> </p> <p> <label for="psw">登录密码：</label> <input type="password" value="" name="密码" id="psw" class="inputs required" /><span>*</span> </p> <p> <label for="re_psw">确认密码：</label> <input type="password" value="" name="密码" id="re_psw" class="inputs required" /><span>*</span> </p> <p> <input type="submit" value="注册" class="btn" onclick="return validateForms()" /> </p> </form>
下面我们来看验证函数validaeForms()函数，当文本框的数据不正确时，首先让该元素取得焦点，同时该文本框变为红色，引起用户的注意。
请看完整示例代码3：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>forms elements -- by zhangchen</title>
<style type="text/css">
/*--common style--*/
* {
margin:0;
padding:0;
}
body {
font-family:'微软雅黑', verdana;
font-size:12px;
background-color:#EFFFDF;
}
.container {
width:960px;
margin:0 auto;
}
.header {
height:35px;
padding-top:30px;
background-color:#58A40D;
color:#ffffff;
}
.header h1 {
font-size:18px;
padding-left:15px;
}
.header h1 span {
float:right;
padding-right:15px;
font-size:14px;
padding-top:3px;
}
.content {
background-color:#ffffff;
padding:20px 30px;
min-height:460px;
*height:460px;
}
.footer {
margin-top:15px;
text-align:center;
}
/*--content style--*/
.content h2 {
font-size:16px;
margin-bottom:10px;
}
.content p {
padding:8px 0;
width:400px;
}
.content p span {
padding-left:8px;
color:red;
}
.content p label {
width:60px;
float:left;
text-align:right;
padding-top:3px;
}
.inputs {
height:23px;
line-height:23px;
border:1px solid #E3E9EF;
border-top:1px solid #ABADB3;
width:250px;
font-family:verdana;
}
.default {
color:#9A9CA1;
}
.focus {
border:1px solid #70CF11;
}
.error {
border:1px solid red;
}
.btn {
width:55px;
height:20px;
line-height:20px;
margin-left:60px;
border:none;
background-color:#58A40D;
color:#ffffff;
}
</style>
<script type="text/javascript">
function labelFocus() {
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++) {
var id = labels[i].getAttribute("for");
var element = document.getElementById(id);
element.onclick = function () {
this.focus();
}
}
}
function addClass(element, value) {
var oldClassName = element.className;
if (!oldClassName) {
element.className = value;
} else {
element.className+=" "+value;
}
}
function removeClass(element, value) {
var oldClassName = element.className;
var reg = eval("/\s*"+value+"/");
if (reg.test(oldClassName)) {
element.className = oldClassName.replace(reg, "");
}
}
function resetFields() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
addClass(element, "default");
//element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
addClass(this, "focus");
if (this.value == this.defaultValue) {
this.value = "";
removeClass(this, "default");
//this.setAttribute("class", "inputs");
}
}
element.onblur = function() {
removeClass(this, "focus");
if (this.value == "") {
this.value = this.defaultValue;
addClass(this, "default");
//this.setAttribute("class", "inputs default");
} else {
if (this.className.indexOf("error")) {
removeClass(this, "error");
}
}
}
}
}
}
function validateForms() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
for (var j=0; j<forms[i].elements.length; j++) {
var element = forms[i].elements[j];
if (element.className.indexOf("required") != -1) {
if (!isFilled(element)) {
alert("请输入您的"+element.name);
element.focus();
addClass(element, "error");
return false;
}
}
if (element.className.indexOf("mobile") != -1) {
if (!isMobile(element)) {
alert("您输入的手机号格式不正确！");
element.focus();
addClass(element, "error");
return false;
}
}
if (element.className.indexOf("email") != -1) {
if (!isEmail(element)) {
alert("您输入的邮箱格式不正确");
element.focus();
addClass(element, "error");
return false;
}
}
}
}
var psw = document.getElementById("psw");
var re_psw = document.getElementById("re_psw");
if (re_psw.value != psw.value) {
alert("两次输入的密码不一致");
re_psw.focus();
addClass(re_psw, "error");
return false;
}
}
function isFilled(field) {
if (field.value == "" || field.value == field.defaultValue) {
return false;
} else {
return true;
}
}
function isMobile(field) {
var reg = /^(13[0-9]|186|188|150|151|158|159|147)\d{8}$/;
if (reg.test(field.value)) {
return true;
} else {
return false;
}
}
function isEmail(field) {
var reg = /^[a-zA-Z0-9](\w)+@(\w)+(\.)+(com|com\.cn|net|cn|net\.cn|org|biz|info|gov|gov\.cn|edu|edu\.cn)$/;
if (reg.test(field.value)) {
return true;
} else {
return false;
}
}
window.onload = function() {
resetFields();
labelFocus();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1><span>2011-04-17 by zhangchen</span>javascript学习笔记（十二） 表单操作及简单验证</h1>
</div><!--header end-->
<div class="content">
<h2>注册表单</h2>
<form method="post" action="#" name="register">
<p>
<label for="user_name">用户名：</label>
<input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs required" /><span>*</span>
</p>
<p>
<label for="email">邮 箱：</label>
<input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs required email" /><span>*</span>
</p>
<p>
<label for="mobile_phone">手机号：</label>
<input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs required mobile" /><span>*</span>
</p>
<p>
<label for="psw">登录密码：</label>
<input type="password" value="" name="密码" id="psw" class="inputs required" /><span>*</span>
</p>
<p>
<label for="re_psw">确认密码：</label>
<input type="password" value="" name="密码" id="re_psw" class="inputs required" /><span>*</span>
</p>
<p>
<input type="submit" value="注册" class="btn" onclick="return validateForms()" />
</p>
</form>
</div><!--content end-->
<div class="footer">
<p>专注web前端技术 by zhangchen(WH)</p>
</div>
</div><!--container end-->
</body>
</html>
表单已经看起来不错了，但是我们在html代码中，我们在提交按钮中添加了onclick动作。我们可以分离出去，让html代码更加干净！
请看完整的代码示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>forms elements -- by zhangchen</title>
<style type="text/css">
/*--common style--*/
* {
margin:0;
padding:0;
}
body {
font-family:'微软雅黑', verdana;
font-size:12px;
background-color:#EFFFDF;
}
.container {
width:960px;
margin:0 auto;
}
.header {
height:35px;
padding-top:30px;
background-color:#58A40D;
color:#ffffff;
}
.header h1 {
font-size:18px;
padding-left:15px;
}
.header h1 span {
float:right;
padding-right:15px;
font-size:14px;
padding-top:3px;
}
.content {
background-color:#ffffff;
padding:20px 30px;
min-height:460px;
*height:460px;
}
.footer {
margin-top:15px;
text-align:center;
}
/*--content style--*/
.content h2 {
font-size:16px;
margin-bottom:10px;
}
.content p {
padding:8px 0;
width:400px;
}
.content p span {
padding-left:8px;
color:red;
}
.content p label {
width:60px;
float:left;
text-align:right;
padding-top:3px;
}
.inputs {
height:23px;
line-height:23px;
border:1px solid #E3E9EF;
border-top:1px solid #ABADB3;
width:250px;
font-family:verdana;
}
.default {
color:#9A9CA1;
}
.focus {
border:1px solid #70CF11;
}
.error {
border:1px solid red;
}
.btn {
width:55px;
height:20px;
line-height:20px;
margin-left:60px;
border:none;
background-color:#58A40D;
color:#ffffff;
}
</style>
<script type="text/javascript">
function labelFocus() {
var labels = document.getElementsByTagName("label");
for (var i=0; i<labels.length; i++) {
var id = labels[i].getAttribute("for");
var element = document.getElementById(id);
element.onclick = function () {
this.focus();
}
}
}
function addClass(element, value) {
var oldClassName = element.className;
if (!oldClassName) {
element.className = value;
} else {
element.className+=" "+value;
}
}
function removeClass(element, value) {
var oldClassName = element.className;
var reg = eval("/\s*"+value+"/");
if (reg.test(oldClassName)) {
element.className = oldClassName.replace(reg, "");
}
}
function resetFields(currentForm) {
for (var i=0; i<currentForm.elements.length; i++) {
var element = currentForm.elements[i];
if (element.type == "submit") continue;
if (element.value == element.defaultValue) {
addClass(element, "default");
//element.setAttribute("class", "inputs default");
}
element.onfocus = function() {
addClass(this, "focus");
if (this.value == this.defaultValue) {
this.value = "";
//this.setAttribute("class", "inputs focus");
removeClass(this, "default");
}
}
element.onblur = function() {
removeClass(this, "focus");
if (this.value == "") {
this.value = this.defaultValue;
//this.setAttribute("class", "inputs default");
addClass(this, "default");
} else {
if (this.className.indexOf("error")) {
removeClass(this, "error");
}
}
}
}
}
//有return的话，会根据check的返回值来控制，是否执行submit操作
//而没有return的话，无论check返回值如何，都会执行submit操作
function validateForms(currentForm) {
for (var i=0; i<currentForm.elements.length; i++) {
var element = currentForm.elements[i];
if (element.className.indexOf("required") != -1) {
if (!isFilled(element)) {
alert("请输入您的"+element.name);
element.focus();
addClass(element, "error");
return false;
}
}
if (element.className.indexOf("mobile") != -1) {
if (!isMobile(element)) {
alert("您输入的手机号格式不正确！");
element.focus();
addClass(element, "error");
return false;
}
}
if (element.className.indexOf("email") != -1) {
if (!isEmail(element)) {
alert("您输入的邮箱格式不正确");
element.focus();
addClass(element, "error");
return false;
}
}
}
var psw = document.getElementById("psw");
var re_psw = document.getElementById("re_psw");
if (re_psw.value != psw.value) {
alert("两次输入的密码不一致");
re_psw.focus();
addClass(re_psw, "error");
return false;
}
}
function isFilled(field) {
if (field.value == "" || field.value == field.defaultValue) {
return false;
} else {
return true;
}
}
function isMobile(field) {
var reg = /^(13[0-9]|186|188|150|151|158|159|147)\d{8}$/;
if (reg.test(field.value)) {
return true;
} else {
return false;
}
}
function isEmail(field) {
var reg = /^[a-zA-Z0-9](\w)+@(\w)+(\.)+(com|com\.cn|net|cn|net\.cn|org|biz|info|gov|gov\.cn|edu|edu\.cn)$/;
if (reg.test(field.value)) {
return true;
} else {
return false;
}
}
function prepareForms() {
var forms = document.forms;
for (var i=0; i<forms.length; i++) {
currentForm = forms[i];
resetFields(currentForm);
currentForm.onsubmit = function() {
return validateForms(this);
}
}
}
window.onload = function() {
prepareForms();
labelFocus();
}
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1><span>2011-04-17 by zhangchen</span>javascript学习笔记（十二） 表单操作及简单验证</h1>
</div><!--header end-->
<div class="content">
<h2>注册表单</h2>
<form method="post" action="#" name="register">
<p>
<label for="user_name">用户名：</label>
<input type="text" value="请输入您的用户名" name="用户名" id="user_name" class="inputs required" /><span>*</span>
</p>
<p>
<label for="email">邮 箱：</label>
<input type="text" value="请输入您的邮箱" name="邮箱" id="email" class="inputs required email" /><span>*</span>
</p>
<p>
<label for="mobile_phone">手机号：</label>
<input type="mobile_phone" value="请输入您的手机号" name="手机号" id="mobile_phone" class="inputs required mobile" /><span>*</span>
</p>
<p>
<label for="psw">登录密码：</label>
<input type="password" value="" name="密码" id="psw" class="inputs required" /><span>*</span>
</p>
<p>
<label for="re_psw">确认密码：</label>
<input type="password" value="" name="密码" id="re_psw" class="inputs required" /><span>*</span>
</p>
<p>
<input type="submit" value="注册" class="btn" onclick="return validateForms()" />
</p>
</form>
</div><!--content end-->
<div class="footer">
<p>专注web前端技术 by zhangchen(WH)</p>
</div>
</div><!--container end-->
</body>
</html>
