Javascript常用前台表单验证

<form action="">
<div class="mail">
<label for="mail"><span class="red">*</span>邮箱地址</label>
<input type="email"  id="mail" name="info[mail]" onblur="onblurFunc(this);" value="" autocomplete="off" maxlength="50">
<span class="join-input-tip"></span>
</div>
<div class="passwd">
<label for="passwd"><span class="red">*</span>登录密码</label>
<input type="password"  id="passwd" name="info[passwd]" onblur="onblurFunc(this);" maxlength="16">
<span  class="join-input-tip"></span>
</div>
<div class="passwd_confirm">
<label for="passwd_confirm"><span class="red">*</span>确认密码</label>
<input type="password"  id="passwd_confirm" name="info[passwd_confirm]" onblur="onblurFunc(this)" maxlength="16">
<span  class="join-input-tip"></span>
</div>
<div class="username">
<label for="username"><span class="red">*</span>姓名</label>
<input type="text"  id="username" name="info[name]" onblur="onblurFunc(this)" value="" maxlength="20">
<span  class="join-input-tip"></span>
</div>
<div class="sex">
<label for="username"><span class="red">*</span>性别  </label>
<input id="boy" type="radio" value="1" name="info[sex]" title="男" >
<label for="boy"> 男 </label>
<input id="girl" type="radio" value="2" name="info[sex]" title="女" >
<label for="girl"> 女 </label>
</div>
<div class="idcard">
<label for="idcard"><span class="red">*</span>身份证</label>
<input type="text"  id="idcard" name="info[idcard]" onblur="onblurFunc(this)" maxlength="18" value="">
<span  class="join-input-tip"></span>
</div>
<div class="phone">
<label for="phone"><span class="red">*</span>手机号码</label>
<input type="tel"  id="phone" name="info[phone]" onblur="onblurFunc(this)" maxlength="11" value="">
<span  class="join-input-tip"></span>
</div>
</form>

// @charset "utf-8";

// 判断表单必选项是否填写
function onblurFunc(obj){
var objID = $(obj).attr('id');

if(objID == 'mail'){
checkMail(obj); // 校验邮箱
}
else if(objID == 'passwd'){
checkPasswd(obj);   // 校验密码
}
else if(objID == 'passwd_confirm'){
checkPasswdConfirm(obj);    // 校验重复密码
}
else if(objID == 'username'){
checkName(obj); // 校验姓名
}
else if(objID == 'phone'){
checkPhone(obj);    // 校验手机号
}
else if(objID == 'idcard'){
checkIDCard(obj);   // 校验身份证
}

}

// 校验邮箱
function checkMail(obj){
var value = $(obj).val();
var mailReg =  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!value){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('邮箱不能为空！');
$(obj).next().show();
return false;
}
if(!mailReg.test(value)){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('请输入正确的邮箱格式！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
$.ajax({
type:'get',
url:'/default/user/ajaxCheckAccountExist/?account='+value,
cache:true,
error:function(e){},
success:function(data){
if(data['result'] == 1){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('此邮箱已被注册，请检查邮箱是否正确！');
$(obj).next().show();
}
else if(data['result'] == 0){
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}
else {
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('请检查邮箱是否正确！');
$(obj).next().show();
}
}
});
}

// 校验密码
function checkPasswd(obj){
var value = $(obj).val();
if(!value ){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('密码不能为空！');
$(obj).next().show();
return false;
}
if(value.length < 6 || value.length >16){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('密码长度为6~16位！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}

// 校验重复密码
function checkPasswdConfirm(obj){
var value = $(obj).val();
if(!value){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('密码不能为空！');
$(obj).next().show();
return false;
}
var passValue = $("#passwd").val();
if(value != passValue){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('密码不一致！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}

// 校验姓名
function checkName(obj){
var value = $(obj).val();
if(!value){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('姓名不能为空！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}

// 校验手机号
function checkPhone(obj){
var value = $(obj).val();
var reg = /^1\d{10}$/;
if(!value){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('手机号不能为空！');
$(obj).next().show();
return false;
}
if(value.length != 11){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('手机号格式错误！');
$(obj).next().show();
return false;
}
if(!reg.test(value)){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('手机号格式不正确！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
$.ajax({
type:'get',
url:'/default/user/ajaxCheckPartExist/?phone='+value,
cache:true,
error:function(e){},
success:function(data){
if(data['result'] == 1){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('此手机号已被注册，请检查手机号是否正确！');
$(obj).next().show();
}
else if(data['result'] == 0){
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}
else {
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('请检查手机号是否正确！');
$(obj).next().show();
}
}
});
}

// 校验身份证
function checkIDCard(obj){
var value = $(obj).val();
if (!value) {
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('身份证号码不能为空！');
$(obj).next().show();
return false;
}
if(value.length > 18 || value.length < 15){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('身份证号码格式错误！');
$(obj).next().show();
return false;
}
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
$.ajax({
type:'get',
url:'/default/user/ajaxCheckPartExist/?idcard='+value,
cache:true,
error:function(e){},
success:function(data){
if(data['result'] == 1){
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('此身份证号码已被注册！');
$(obj).next().show();
}
else if(data['result'] == 0){
$(obj).css({'border-color':'#ccc'});
$(obj).next().hide();
$(obj).next().text('');
}
else {
$(obj).css({'border-color':'#ff3f13'});
$(obj).next().text('请检查身份证号码是否正确！');
$(obj).next().show();
}
}
});
}

// 区分PC和手机
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}