form表单常用的验证

1.表单验证是登录和注册页面中最为常见的，下面是一些源代码和验证，可适当选取：

<form action="" method="post" class="form-action2 text-left">

<div class="form-group lr-input">
<input type="text" name="" class="form-control" id="username" placeholder="用户名"/>//用户名
</div>
<div class="form-group lr-input">
<input type="text" name="" class="form-control" id="phone" placeholder="请填写手机号码"/>   //手机号码
</div>
<div class="form-group lr-input get-yzm">
<div class="col-xs-6 col-sm-6 padding-both-0 lr-input">
<input type="text" name="" placeholder="请输入手机验证码" id="p_yzm" class="input-yzm form-control" />//手机验证码
</div>
<input type="button" name="" value="获取验证码" id="p_send" class="pull-right col-xs-5 col-sm-5" />
</div>

<div class="form-group lr-input">

<labelclass="radio-inline">

		 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
	   </label>
		<label class="radio-inline">
		  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
		</label>
		<label class="radio-inline">
 		 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
		</label>

</div>//单选框
<div class="form-group lr-input clearfix">
<input type="password" name="" class="form-control" id="pwd" placeholder="请填写密码" />  //密码
</div>
<div class="form-group lr-input">
<input type="password" name="" class="form-control" id="rpwd" placeholder="请确认密码" />  //确认密码
</div>
<div class="form-group lr-input get-yzm">
<div class="col-xs-6 col-sm-6 padding-both-0 lr-input">
<input type="text" name="" placeholder="请输入验证码" id="y_yzm" class="input-yzm form-control" /> //验证码
</div>
<input type="button" name="" value="验证码" id="y_send" class="pull-right col-xs-5 col-sm-5" />
</div>
<div class="checkbox chk-label2 clearfix">
<label>
 <input type="checkbox" class="chk" id="check"> 我已阅读并同意<a href="#" target="_blank">《庖丁技术用户协议》</a>   //协议
</label>
</div>
<button type="button" class="btn btn-orange btn-persent" id="register" disabled="disabled">注册</button>  //注册按钮
<a href="#">已有庖丁账号?</a></a><a href="#" class="pull-right">直接登录</a>
</form>

<script>

$('input').focus(function(){                                               //获取焦点时，提示字体消失
$(this).attr('placeholder','');
$(this).parent('div').removeClass('has-error');
})
$('input').blur(function(){//失去焦点时，如果输入框内容为空则提示字体出现
if($(this).val()==''){
//alert('aa');
$('#phone').attr('placeholder','请填写手机号码');
$('#p_yzm').attr('placeholder','请输入手机验证码');
$('#pwd').attr('placeholder','请填写密码');
$('#rpwd').attr('placeholder','请确认密码');
$('#y_yzm').attr('placeholder','请输入验证码');
$(this).parent('div').addClass('has-error');
}
})
$('#check').change(function(){//单选框和复选框判断是否已经选中的判断
if($(this).is(':checked')){   
$('#register').removeAttr('disabled');
}
else {
$('#register').attr('disabled','disabled');
}
})


//var pstatus = 1;  //手机状态1未被占用
var codestatus = 1;//验证码状态
function check_phone(){//建立手机号码函数和正则表达式
var phone=$('#phone').val();
var telReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if(phone!=''&&phone.match(telReg)){
$.ajax({
type: 'POST',
url: 'register.php',
data:{
phone: 'phone'
},
dataType: 'json',
success: function(pstatus){
if(pstatus = 1){
$('#phone').parent().addClass('has-success').removeClass('has-error');
}
else {
$('#phone').parent('div').addClass('has-error');
}
},
error: function(pstatus){

}
})
return true;
}
else {
$('#phone').parent('div').addClass('has-error');
return false;
}
}

//验证码倒计时
function time(o) { 
var wait=60; 
if (wait == 0) { 
o.removeAttribute("disabled"); 
o.value="重新发送"; 
wait = 60; 
} else { 
o.setAttribute("disabled", true); 
o.value="已发送(" + wait +"s"+ ")"; 
wait--; 
setTimeout(function() { 
time(o) 
}, 
1000) 
} 
}
$('#p_send').click(function(){
if(check_phone()){
time(this);     //用倒计时
}
})
function check_p_yzm(){//手机验证码函数和规则
var p_yzm=$('#p_yzm').val();
if(p_yzm.match(/^[0-9]{4}$/) != null){
$('#p_yzm').parent().addClass('has-success').removeClass('has-error');
return true;

}
else {
$('#p_yzm').parent('div').addClass('has-error');
return false;
}
}

function check_pwd(){//密码函数和规则
var pwd=$('#pwd').val();
var pwdReg = /^[A-Za-z0-9]{5,15}$/;
if(pwd!=''&&pwd.match(pwdReg)){
$('#pwd').parent('div').addClass('has-success').removeClass('has-error');
return true;
}
else {
$('#pwd').parent('div').addClass('has-error');
return false;
}
}

function check_rpwd(){//确认密码
var rpwd=$('#rpwd').val();

if(rpwd!=''&&rpwd==pwd){
$('#rpwd').parent().addClass('has-success').removeClass('has-error');
return true;
}
else {
$('#rpwd').parent().addClass('has-error');
return false;
}
}
$('#y_send').click(function(){

})
function check_y_yzm(){    //验证码
var y_yzm=$('#y_yzm').val();
if(y_yzm.match(/^[0-9]{4}$/) != null){
$('#y_yzm').parent('div').addClass('has-success').removeClass('has-error');
return true;
}
else {
$('#y_yzm').parent('div').addClass('has-error');
return false;
}
}
$('#register').click(function(){
var a=check_phone();
var b=check_p_yzm();
var c=check_pwd();
var d=check_rpwd();
var e=check_y_yzm();

if(a&&b&&c&&d&&e){
$(this).attr('type','submit');
$.ajax({
type: 'POST',
url: 'register.php',
data: {
phone: 'phone',
p_yzm: 'p_yzm',
pwd: 'pwd',
rpwd: 'rpwd',
y_yzm: 'y_yzm'
},
dataType: 'json',
success: function(){
window.location.href="index.html"
},
error: function(){
alert('')
}
})
}
else {
//$('input').parent('div').addClass('has-error');
}
})



</script>