1.最原始的方法
<form onsubmit="return submitFun()"><!-- submitFun()方法返回true跳转 返回false不跳转 --> function submitFun(){
var name = .. //表单数据
var password = ...//表单数据
var data = .. //数据库数据
if(name == data.name&&password = data.password){
return true
}else{
return false
}
}
2.jquery的原始的方法
<form></form>用jquery提交表单，提交时逐一验证
$('form').submit(function(){if(...){
return true
}else{
return false
}
})
3.使用jquery插件
jquery官方有一个jquery.validate插件专门用作表单验证的，百度可以搜到大量教程。当然也可以下载其他的jquery表单验证插件，使用起来很方便。
个人推荐使用jquery插件
用正则表达式，if判断内容是否为空，为空则提示输入手机号，不为空再用正则验证内容是否符合格式
附上源码
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{margin: 0padding: 0}
#box{
width: 240px
height: 100px
border:1px solid gray
border-radius: 10px
padding: 30px 10px 10px 10px
margin: 100px auto 0
}
#tel{
width: 160px
height: 20px
margin: 0
padding-left:5px
}
#btn{
width: 50px
height: 25px
}
p{
margin-top: 10px
font-size: 14px
font-family: 'Microsoft YaHei'
}
</style>
</head>
<body>
<div id="box">
<input type="" name="" id="tel">
<input type="button" name="" value="确认" id="btn">
<p></p>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box')
var oBtn=document.getElementById('btn')
var oP=document.getElementsByTagName('p')[0]
oBtn.onclick=function(){
var val=document.getElementById('tel').value
var reg=/^1[345678]\d{9}$/
if (val=='') {
oP.style.color="red"
oP.innerHTML="请输入手机号!"
}else if(reg.test(val)){
oP.style.color="green"
oP.innerHTML="输入正确！"
}else{
oP.style.color="red"
oP.innerHTML="输入错误，请重新输入！"
}
}
</script>
</body>
</html>
我来举个例子，很简单的<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function formCheck(){//表单验证
var userForm=document.forms.userForm
if(userForm.username.value==null||userForm.username.value.length<=0){
alert("用户名不能为空")
return false
}else if(userForm.username.value.length<6||userForm.username.value.length>20){
alert("用户名必须为6-20位")
return false
}else if(userForm.password.value==null||userForm.password.value.length<=0){
alert("密码不能为空")
return false
}else if(userForm.password.value.length<6||userForm.password.value.length>20){
alert("密码必须为6-20位")
return false
}else{
userForm.submit()
}
}
</script>
</head>
<body>
<form action="" name="userForm">
userName:<input type="text" name="username"><br>
password:<input type="password" name="password"><br>
<input type="button" value="提交" onclick=" formCheck()">
</form>
</body>
</html>
