<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{color: red;font-size: 12px;display: none;}
</style>
<script type="text/javascript">
/*
表单提交:
from 表单
action 目标页面的url 当提交成功时，跳转的目标页面
method get post 网络提交方式
例如：get sucess.html?username='lili'&pwd='1231'
post sucess.html
submit 提交
onsubmit return 语句; 若返回值为true或者 "" 均可以提交
表单校验：
*/
</script>
</head>
<body>
<form action="sucess.html" method="post" onsubmit="return valForm()">
用户名:<input type="text" id="txt-name"><span id="tip-name">用户名必须为8-12为字母或数字</span><br>
密码：<input type="password" id="pwd"><span id="tip-pwd">密码必须为6位数字</span><br>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
//校验用户名密码是否合法
var iptName=document.getElementById('txt-name');
var iptPwd=document.getElementById('pwd');
var tipName=document.getElementById('tip-name');
var tipPwd=document.getElementById('tip-pwd');
//对用户名和密码进行校验
function valForm(){
return valUserName()&&valPwd();
}
//校验用户名
function valUserName() {
var p=/^\w\w{7,11}$/;//用户名必须为8-12为字母或数字
var r=p.test(iptName.value);//校验
if(!r){
//校验不通过
tipName.style.display='inline-block';//显示
iptName.focus();
return false;
}
return true;
}
//校验密码
function valPwd(){
var p=/^\d\d{5}$/;//6位数字
var r=p.test(iptPwd.value);//校验
if(!r){
tipPwd.style.display='inline-block';
iptPwd.focus();//获取焦点
return false;
}
return true;
}
</script>
</body>
</html>
![用jQuery实现表单验证[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)