<html>
<style type="text/css" media="screen">
span{
color:red;
}
</style>
<form action="add2.php" method="post" onsubmit="return checkall()">
<table>
<tr>
<td>单位名称</td>
<td>
<input type="text" name="dw_name" placeholder="单位名称" onblur="return check_dw_name()">
<span id="dw_name"></span>
</td>
</tr>
<tr>
<td>联系人</td>
<td>
<input type="text" name="lx_user" placeholder="联系人" onblur="return check_lx_user()">
<span id="lx_user"></span>
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" name="tel" placeholder="手机号" onblur="return check_tel()">
<span id="tel"></span>
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text" name="email" placeholder="邮箱" onblur="return check_email()">
<span id="email"></span>
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" placeholder="用户名" onblur="return check_username()">
<span id="username"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" name="pwd" placeholder="密码" onblur="return check_pwd()">
<button onclick="return showpwd()">显示密码</button>
<span id="pwd"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="text" name="repwd" placeholder="确认密码" onblur="return check_repwd()">
<span id="repwd"></span>
</td>
</tr>
<tr>
<td colspan="2">
<button>注册</button>
</td>
</tr>
</table>
</form>
</html>
<script>
//验证单位名称
function check_dw_name() {
var dw_name = document.getElementsByName('dw_name')[0].value
var ptn_dw_name = /^\w{2,12}$/i;
if(!dw_name.match(ptn_dw_name)){
document.getElementById('dw_name').innerHTML='用户名格式不正确'
return false;
}else{
document.getElementById('dw_name').innerHTML=''
return true;
}
}
//验证联系人
function check_lx_user() {
var lx_user = document.getElementsByName('lx_user')[0].value
var ptn_lx_user = /^[a-zA-Z|\u4e00-\u9fa5]+$/i;
if(!lx_user.match(ptn_lx_user)){
document.getElementById('lx_user').innerHTML='联系人格式不正确'
return false;
}else{
document.getElementById('lx_user').innerHTML=''
return true;
}
}
//验证手机号
function check_tel() {
var tel = document.getElementsByName('tel')[0].value
var ptn_tel = /^1[35789]\d{9}$/;
if(!tel.match(ptn_tel)){
document.getElementById('tel').innerHTML='手机号格式不正确'
return false;
}else{
document.getElementById('tel').innerHTML=''
return true;
}
}
//验证邮箱
function check_email() {
var email = document.getElementsByName('email')[0].value
var ptn_email = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
if(!email.match(ptn_email)){
document.getElementById('email').innerHTML='邮箱格式不正确'
return false;
}else{
document.getElementById('email').innerHTML=''
return true;
}
}
//验证用户名
function check_username() {
var username = document.getElementsByName('username')[0].value
var ptn_username = /^\w{6,24}$/;
if(!username.match(ptn_username)){
document.getElementById('username').innerHTML='用户名格式不正确'
return false;
}else{
document.getElementById('username').innerHTML=''
return true;
}
}
//验证pwd 不等于用户名
function check_pwd() {
var username = document.getElementsByName('username')[0].value
var pwd = document.getElementsByName('pwd')[0].value
if(!pwd){
document.getElementById('pwd').innerHTML='密码不能为空'
return false;
}
if(pwd===username){
document.getElementById('pwd').innerHTML='密码不能和用户名相同'
return false;
}else{
document.getElementById('pwd').innerHTML=''
return true;
}
}
//验证两次密码是否一致
function check_repwd() {
var pwd = document.getElementsByName('pwd')[0].value
var repwd = document.getElementsByName('repwd')[0].value
if(repwd!=pwd){
document.getElementById('repwd').innerHTML='两次密码不一致'
return false;
}else{
document.getElementById('repwd').innerHTML=''
return true;
}
}
// 提交表单的时候，验证
function checkall(){
var check = check_dw_name()&&check_lx_user()&&check_tel()&&check_email()&&check_username()&&check_pwd()&&check_repwd();
console.log(check);
return check;
}
</script>