前端注册jq验证
<form action="" method="post" name="myform">
<p>用户名:<input type="text" class="myinput" name="users" maxlength="12" placeholder="请输入用户名" required="required" id="username"/><!--<input type="hidden" id="hidden"/>--><span id="hidden"></span></p>
<p>密 码:<input type="password" class="myinput" name="pwd" placeholder="请输入密码" id="password" required="required"/><span id="hidden2"></span></p>
<p>密 码:<input type="password" class="myinput" name="pwds" placeholder="请再次输入密码" required="required" id="password2"/><span id="hidden3"></span></p>
<p>邮 箱:<input type="text" class="myinput" name="email" placeholder="请输入邮箱" value="" required="required" id="email"/><span id="hidden4"></span></p>
<p>验证码:<input type="text" class="myinput" size="8" placeholder="请输入验证码" required="required"/></p>
<p><input type="submit" value="登录" /><input type="submit" value="注册" disabled="disabled" id="reg"/></p>
</form>
</div>
</div>
<div class="rightBtm"></div>
</div>
<script type="text/javascript">
$(function(){
// 先定义变量
var usernames=$('#username');
var passwords=$('#password');
var password2s=$('#password2');
var emails=$('#email');
var hidden1=$('#hidden');
var hidden2=$('#hidden2');
var hidden3=$('#hidden3');
var hidden4=$('#hidden4');
var username,password,password2,emali;
function check_user(){ //判断用户名是否输入正确
if(usernames.val().length>2){
//alert(username.val().length);
hidden1.html('<font color="green">输入正确请继续</font>');
username=1;
}
else{
//alert(username.val().length);
hidden1.html('<font color="red">输入错误,请输入以下划线和字母组成的昵称</font>');
username=0;
}
}
function check_pass(){
if(passwords.val().length>=6&&passwords.val().length<=12){
hidden2.html('<font color="green">输入正确请继续</font>');
password=1;
}
else{
hidden2.html('<font color="red">输入错误,请输入正确的密码</font>');
password=0;
}
}
function check_pass2(){
if(password2s.val()==passwords.val()){
hidden3.html('<font color="green">两次输入密码一样</font>');
password2=1;
}
else{
hidden3.html('<font color="red">两次输入不一样,请重新输入</font>');
password2=0;
}
}
function check_email(){
if(emails.val().match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
hidden4.html('<font color="green">请输入正确的邮箱</font>');
email=1;
}
else{
hidden4.html('<font color="red">输入正确的邮箱</font>');
email=0 ;
}
}
//总函数。
function reg(){
usernames.blur(function(){
check_user();
check();
});
usernames.keyup(function(){
check_user();
check();
});
passwords.blur(function(){
check_pass();
check();
})
passwords.keyup(function(){
check_pass();
check();
})
password2s.blur(function(){
check_pass2();
check();
})
password2s.keyup(function(){
check_pass2();
check();
})
emails.blur(function(){
check_email();
check();
})
emails.keyup(function(){
check_email();
check();
})
}
function check(){
if(username==1&&password==1&&password2==1&&email==1){ //这个函数是当所有的注册内容都符合的时候那个注册按钮自动变亮,这样比较安全
$('#reg').attr('disabled',false);
}
else{
$('#reg').attr('disabled',true);
}
}
reg(); //调用
})
</script>

浙公网安备 33010602011771号