<!DOCTYPE html>
<html>
<head>
<title>表单提交验证功能</title>
<meta charset="utf-8"/>
<script src="scripts/jquery-1.11.3.js"></script>
</head>
<body>
<fieldset>
<legend>用户注册页面</legend>
<form onsubmit="return formValidator();" id="myform" name="myform">
<table>
<tr>
<td>用户名:</td>
<td>
<input type="text" id="user">
</td>
<td>
<!-- 提示和错误内容 -->
<div id="userTip"></div>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" id="pwd">
</td>
<td>
<div id="pwdTip"></div>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" id="repwd">
</td>
<td>
<div id="repwdTip"></div>
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<input type="text" id="addr">
</td>
<td>
<div id="addrTip"></div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" id="submit" value="注册">
</td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
* 表单提交实现方式
* * 通过submit按钮提交表单
* * 表单具有onsubmit事件
* * 表单具有submit()方法
*
* 通过DOM获取<form>表单的方式
* * getElementById("formId")
* * window.document.forms[0]
* * window.document.表单名称
*
* 事件对象,return value(返回值)
* * true - 允许默认事件(行为)执行
* * false - 阻止默认事件(行为)执行
*
* 如何实现表单提交验证
* * 用户名 - 非空,只能输入英文+数字,长度在6至12之间
* * 密码 - 非空,只能输入英文,长度只能为6
* * 确认密码 - 两次密码输入一致
* * 地址 - 非空
*
* 功能
* * 对应的input获取焦点时,给出提示内容
* * 对应的input失去焦点时,做出验证
* * 表单提交时,保证上述所有input验证通过
*/
// 用户名的验证
function userValidator(){
var regExp = /^[a-zA-Z0-9]{6,12}$/;
// 做出验证
if($("#user").val() == null || $("#user").val() == ""){
// 为空
$("#userTip").text("用户名不能为空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test($("#user").val())){
// 不匹配
$("#userTip").text("用户名输入错误.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 输入正确
$("#userTip").text("用户名输入正确.").css("color","green").css("font-weight","bolder");
return true;
}
}
function pwdValidator(){
var regExp = /^[a-zA-Z]{6}$/;
if($("pwd").val() == null ||$("pwd").val() == ""){
// 为空
$("#pwdTip").text("密码不能为空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test($("pwd").val())){
// 不匹配
$("#pwdTip").text("密码输入错误.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 输入正确
$("#pwdTip").text("密码输入正确.").css("color","green").css("font-weight","bolder");
return true;
}
}
function repwdValidator(){
var regExp = /^[a-zA-Z]{6}$/;
if($("#repwd").val() == null ||$("#repwd").val() == ""){
// 为空
$("#repwdTip").text("确认密码不能为空.").css("color","red").css("font-weight","bolder");
return false;
}else if(!regExp.test($("#repwd").val())){
// 不匹配
$("#repwdTip").text("确认密码输入错误.").css("color","red").css("font-weight","bolder");
return false;
}else if($("#repwd").val() != $("#pwd").val()){
// 两次密码输入不一致
$("#repwdTip").text("两次密码输入不一致.").css("color","red").css("font-weight","bolder");
return false;
}else{
// 输入正确
$("#repwdTip").text("确认密码输入正确.").css("color","green").css("font-weight","bolder");
return true;
}
}
function addrValidator(){
if($("#add").val() == null ||$("#add").val()== ""){
$("#addrTip").text("地址不能为空.").css("color","red").css("font-weight","bolder");
return false;
}else{
$("#addrTip").text("地址输入正确.").css("color","green").css("font-weight","bolder");
return true;
}
}
$("#user").focus(function(){
// 给出提示内容
$("#userTip").text("用户名必须为6至12之间的英文和数字.").css("color","blue").css("font-weight","bolder");;
}).blur(userValidator);
$("#pwd").focus(function(){
$("#pwdTip").text("密码必须为6位的英文.").css("color","blue").css("font-weight","bolder");
}).blur(pwdValidator);
$("#repwd").focus(function(){
$("#repwdTip").text("确认密码必须为6位的英文.").css("color","blue").css("font-weight","bolder");
}).blur(repwdValidator);
$("#addr").focus(function(){
$("#addrTip").text("必须输入地址.").css("color","blue").css("font-weight","bolder");
}).blur(addrValidator);
// 定义一个函数formValidator()用于验证表单
function formValidator(){
// 上述所有验证通过
if(userValidator()&&pwdValidator()&&repwdValidator()&&addrValidator()){
// 允许表单提交
return true;
}else{
return false;
}
}
</script>
</body>
</html>
易维（深圳）科技有限公司
多维你的世界
微信：EVisYOJOY
联系&投稿：service@evister.com