用css和js写表单验证 使用javascript及正则表达式实现表单验证(CSS js练习)

标签：

注册界面

body{margin:0px;padding:0px;}

.zc{

width:380px;

height:600px;

margin:0 auto;

line-height:40px;

}

.main{

font-size:20px;

border:1px solid #000;

padding:10px;

background-color:#FFC;

}

.top{

font-size:30px;

font-weight:bold;

color:blue;

text-align:center;

}

用户注册

账 号：

密 码：

确认密码：

姓 名：

性 别： 男

女

年 龄：

电子邮件：

固定电话：

手机号码：

function checkForm(){

var id=document.getElementById("userId").value;//获取值

var mm=document.getElementById("userPw").value;

var mm1=document.getElementById("userPw1").value;

var name=document.getElementById("name").value;

var age=document.getElementById("age").value;

var email=document.getElementById("email").value;

var tel=document.getElementById("tel").value;

var phone=document.getElementById("phone").value;

var point1=document.getElementById("point1"); //获取指向

var point2=document.getElementById("point2");

var point3=document.getElementById("point3");

var point4=document.getElementById("point4");

var point5=document.getElementById("point5");

var point6=document.getElementById("point6");

var point7=document.getElementById("point7");

var point8=document.getElementById("point8");

var idReg=/^[a-zA-Z]{1}(\w){7,15}$/;//正则表达式规则

var mmReg=/^(\w){8,16}$/;

var nameReg=/^(\w){4,10}$/;

var ageReg=/^[1-9]{1}[0-9]{0,1}$/;

var emailReg=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;

var telReg=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;

var phoneReg=/^[1]{1}[0-9]{10}$/;

if(!idReg.test(id)){ //idReg.test(id)验证值是否满足规则，满足返回true,不满足返回false。

alert("请输入以字母开头且由字母、数字及下划线组成的8-16位账号");

return false;

}

point1.innerHTML="输入正确"; //提示在后面显示

if(!mmReg.test(mm)){

alert("请输入由字母、数字及下划线组成的8-16位密码");

return false;

}

point2.innerHTML="输入正确";

if(mm!=mm1){

alert("两次输入不正确");

return false;

}

point3.innerHTML="输入正确";

if(!nameReg.test(name)){

alert("请输入由字母、数字及下划线组成的4-10位姓名");

return false;

}

point4.innerHTML="输入正确";

if(!ageReg.test(age)){

alert("请输入正确的数字");

return false;

}

point5.innerHTML="输入正确";

if(!emailReg.test(email)){

alert("请输入正确的email地址");

return false;

}

point6.innerHTML="输入正确";

if(!telReg.test(tel)){

alert("请输入正确的电话号码");

return false;

}

point7.innerHTML="输入正确";

if(!phoneReg.test(phone)){

alert("请输入正确的手机号码");

return false;

}

point8.innerHTML="输入正确";

return true;

}

标签：