javascript常用检测类

作者： JinYon
发布时间： 2017 年 02 月 24 日
881次浏览
暂无评论
分类： JQuery

下面是一个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="public.js"></script>
</head>
<body onload="yanzheng(this)">
<form method="post" action="info_2.php" onsubmit="return check_all()">
<table>
<tr>
<td colspan="2">账户基本信息</td>

</tr>
<tr>
<td>登录账号：</td>
<td><input type="text" name="zhanghao" onblur="check_zhanghao(this)"><span name="sp1"></span></td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nicheng" onblur="check_nicheng(this)"><span name="sp2"></span></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男"onclick="check_sex()">男

<input type="radio" name="sex" value="女"onclick="check_sex()">女

<span id="sp3"></span></td>
</tr>
<tr>
<td colspan="2">账户安全设置</td>

</tr>
<tr>
<td>登录密码：</td>
<td><input type="password" name="pwd" onblur="check_pwd(this)"><span name="sp4"></span></td>
</tr>
<tr>
<td>确认登录密码：</td>
<td><input type="password" name="repwd" onblur="check_repwd(this)"><span name="sp5"></span></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="username" onblur="check_username(this)"><span name="sp6"></span></td>
</tr>
<tr>
<td>身份证号：</td>
<td><input type="text" name="idcard" onblur="check_idcard(this)"><span name="sp7"></span></td>
</tr>
<tr>
<td>邮箱地址：</td>
<td><input type="text" name="email" onblur="check_email(this)"><span name="sp8"></span></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" id="number" onblur="check_number()">
<input type="button"  onclick="yanzheng()" value="获取验证码" >
<span id="sp10"></span>
<span id="sp9"></span>

</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
</table>
</form>
<script type="text/javascript">
//验证登录账号
function check_zhanghao(obj){
var sp1=$('sp1');
if(obj.value==''){
sp1.innerHTML='登录账号不能为空';
sp1.style.color='red';
return false;
}else{
var reg=/^\w{5,10}$/i;
if(reg.test(obj.value)){
sp1.innerHTML='正确';
sp1.style.color='green';
return true;
}else{
sp1.innerHTML='登录账号5-10字符';
sp1.style.color='red';
return false;
}
}return true;
}
//验证昵称
function check_nicheng(obj){
var sp2=$('sp2');
if(obj.value==''){
sp2.innerHTML='登录账号不能为空';
sp2.style.color='red';
return false;
}else{
var reg=/^\w{5,10}$/i;
if(reg.test(obj.value)){
sp2.innerHTML='正确';
sp2.style.color='green';
return true;
}else{
sp2.innerHTML='昵称5-10字符';
sp2.style.color='red';
return false;
}
}return true;
}
//验证密码
function check_pwd(obj2){
var sp4=$('sp4');
if(obj2.value==''){
sp4.innerHTML='密码不能为空';
sp4.style.color='red';
return false;
}else{
var reg=/^\w{6,}$/;
if(reg.test(obj2.value)){
sp4.innerHTML='正确';
sp4.style.color='green';
return true;
}else{
sp4.innerHTML='格式不正确';
sp4.style.color='red';
return false;
}
}return true;
}
//验证确认密码
function check_repwd(obj3){
var sp5=$('sp5');
var pwd=$('pwd');
var repwd=$('repwd');
if(obj3.value==''){
sp5.innerHTML='密码不能为空';
sp5.style.color='red';
return false;
}else{

if(obj3.value==pwd.value){
sp5.innerHTML='正确';
sp5.style.color='green';
return true;
}else{
sp5.innerHTML='确认密码和密码不一致';
sp5.style.color='red';
return false;
}
}return true;
}

//验证性别
num2=0;
function check_sex(){
var sex=document.getElementsByName('sex');
// var sp4=document.getElementById('sp4')

for(var i=0;i<sex.length;i++){
if(sex[i].checked==true){
num2=num2+1;
}
}
//alert(num2);

if(num2!=0){
sp3.innerHTML='√';
sp3.style.color='green';
return true;
}else{
sp3.innerHTML='性别不能为空';
sp3.style.color='red';
return false;
}

}
//验证姓名
function check_username(obj){
var sp6=$('sp6');
if(obj.value==""){
sp6.innerHTML='用户名不能为空';
sp6.style.color='red';
return false;
}else{
var reg=/^[\u4e00-\u9fa5]{2,3}$/;
if(!reg.test(obj.value)){
sp6.innerHTML='用户名应该2-3个汉字';
sp6.style.color='red';
return false;
}else{
sp6.innerHTML='√';
sp6.style.color='green';
return true;
}
}
return true;
}

//验证邮箱
function check_email(obj5){
var sp8=$('sp8');
if(obj5.value==''){
sp8.innerHTML='邮箱不能为空';
sp8.style.color='red';
return false;
}else{
var reg=/^(\w+@\w+(\.)com|net|cn)$/;
if(reg.test(obj5.value)){
sp8.innerHTML='正确';
sp8.style.color='green';
return true;
}else{
sp8.innerHTML='格式不正确';
sp8.style.color='red';
return false;
}return true;
}
}

//验证身份证号
function check_idcard(obj9){
var sp7=$('sp7');
if(obj9.value==''){
sp7.innerHTML='身份证号不能为空';
sp7.style.color='red';
return false;
}else{
var reg=/^\d{18}|\d{17}x$/i;
if(reg.test(obj9.value)){
sp7.innerHTML='正确';
sp7.style.color='green';
return true;
}else{
sp7.innerHTML='格式不正确';
sp7.style.color='red';
return false;
}return true;
}
}

//生成验证码
function yanzheng(){
var sp9=document.getElementById('sp9');
var str1="";
for(var i=1;i<=4;i++){
str1=str1+parseInt(Math.random()*10);
sp9.innerHTML=str1;

}
}
//验证验证码
function check_number(){
var number=document.getElementById('number').value
var sp10=document.getElementById('sp10')
var sp9=document.getElementById('sp9');
if(number==""){
sp10.innerHTML='验证码不能为空';
sp10.style.color='red';
return false;
}else{
if(number!=sp9.innerHTML){
sp10.innerHTML='验证码和你写的不一致';
sp10.style.color='red';
return false;
} else{
sp10.innerHTML='√';
sp10.style.color='green';
return true;}
return true;
}
}

function check_all(){
if(check_zhanghao($('zhanghao')) & check_nicheng($('nicheng')) & check_pwd($('pwd')) & check_repwd($('repwd')) & check_sex()& check_username($('username')) &  check_idcard($('idcard')) &check_email($('email'))  & check_number()   ){
return true;}
else{ return false;}
}
</script>
</body>
</html>