注册页面,各种验证和省市联动
2016-05-24 09:54
288 查看
/** * Created by Administrator on 2016/5/23. */ $(document).ready(function(){ //提交验证 $("#registerBtn").click(function(){ $("form").submit(function(){ //邮箱验证 var email=$(this).val(); var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //正则表达式邮箱地址判断 if(reg.test(email)){ $("#email_prompt").addClass("register_prompt_ok"); }else{ $("#email_prompt").addClass("register_prompt_error"); $("#email_prompt").html("你输入的邮箱地址不正确,请重新输入!"); $("#email").addClass("register_input_Blur"); return false; } //昵称验证 var nickName=$(this).val(); var reg=/^\w{4,10}$/; //正则表达式4~10位 if(reg.test(nickName)){ $("#nickName_prompt").addClass("register_prompt_ok"); }else{ $("#nickName_prompt").addClass("register_prompt_error"); $("#nickName_prompt").html("用户名4~10位"); $("#nickName").addClass("register_input_Blur"); return false; } //密码验证 //移出状态开始验证 var pwd=$(this).val(); var reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/; //正则表达式6~16位密码 if(reg.test(pwd)){ $("#pwd_prompt").addClass("register_prompt_ok"); }else{ $("#pwd_prompt").addClass("register_prompt_error"); $("#pwd_prompt").html("必须包含大小写字母和数字的组合,不能使用特殊字符,长度在6-16之间"); $("#pwd").addClass("register_input_Blur"); return false; } //密码确认验证 var repwd=$(this).val(); var reg=$("#pwd").val(); //上一次输入的密码 if(reg==repwd){ $("#repwd_prompt").addClass("register_prompt_ok"); }else{ $("#repwd_prompt").addClass("register_prompt_error"); $("#repwd_prompt").html("两次输入密码不相同"); $("#repwd").addClass("register_input_Blur"); return false; } alert("提交成功"); return true; }); }); //输入状态加样式 $(".register_input").focus(function(){ $(this).addClass("register_input_Focus"); }); //移出状态移除样式 $(".register_input").blur(function(){ $(this).removeClass("register_input_Focus"); }); //邮箱验证 //关注时移除验证后状态 $("#email").focus(function(){ $("#email_prompt").removeClass("register_prompt_ok"); $("#email_prompt").removeClass("register_prompt_error"); $("#email_prompt").html(""); $("#email").removeClass("register_input_Blur"); }); //移出状态开始验证 $("#email").blur(function(){ var email=$(this).val(); var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //正则表达式邮箱地址判断 if(reg.test(email)){ $("#email_prompt").addClass("register_prompt_ok"); }else{ $("#email_prompt").addClass("register_prompt_error"); $("#email_prompt").html("你输入的邮箱地址不正确,请重新输入!"); $("#email").addClass("register_input_Blur"); } }); //昵称验证 //关注时移除验证后状态 $("#nickName").focus(function(){ $("#nickName_prompt").removeClass("register_prompt_ok"); $("#nickName_prompt").removeClass("register_prompt_error"); $("#nickName_prompt").html(""); $("#nickName").removeClass("register_input_Blur"); }); //移出状态开始验证 $("#nickName").blur(function(){ var nickName=$(this).val(); var reg=/^\w{4,10}$/; //正则表达式4~10位 if(reg.test(nickName)){ $("#nickName_prompt").addClass("register_prompt_ok"); }else{ $("#nickName_prompt").addClass("register_prompt_error"); $("#nickName_prompt").html("用户名4~10位"); $("#nickName").addClass("register_input_Blur"); } }); //密码验证 //关注时移除验证后状态 $("#pwd").focus(function(){ $("#pwd_prompt").removeClass("register_prompt_ok"); $("#pwd_prompt").removeClass("register_prompt_error"); $("#pwd_prompt").html(""); $("#pwd").removeClass("register_input_Blur"); }); //移出状态开始验证 $("#pwd").blur(function(){ var pwd=$(this).val(); var reg=/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/; //正则表达式6~16位密码 if(reg.test(pwd)){ $("#pwd_prompt").addClass("register_prompt_ok"); }else{ $("#pwd_prompt").addClass("register_prompt_error"); $("#pwd_prompt").html("必须包含大小写字母和数字的组合,不能使用特殊字符,长度在6-16之间"); $("#pwd").addClass("register_input_Blur"); } }); //密码确认验证 //关注时移除验证后状态 $("#repwd").focus(function(){ $("#repwd_prompt").removeClass("register_prompt_ok"); $("#repwd_prompt").removeClass("register_prompt_error"); $("#repwd_prompt").html(""); $("#repwd").removeClass("register_input_Blur"); }); //移出状态开始验证 $("#repwd").blur(function(){ var repwd=$(this).val(); var reg=$("#pwd").val(); //上一次输入的密码 if(reg==repwd){ $("#repwd_prompt").addClass("register_prompt_ok"); }else{ $("#repwd_prompt").addClass("register_prompt_error"); $("#repwd_prompt").html("两次输入密码不相同"); $("#repwd").addClass("register_input_Blur"); } }); //插入省市列表 var arr=new Array(); arr["广东省"]=["东莞市","广州市","中山市","深圳市","惠州市","江门市","珠海市","汕头市","佛山市","湛江市","河源市","肇庆市","清远市","潮州市","韶关市","揭阳市","阳江市","梅州市","云浮市","茂名市","汕尾市"]; arr["广西省"]=["贵港市","玉林市","北海市","南宁市","柳州市","桂林市","梧州市","钦州市","来宾市","河池市","百色市","贺州市","崇左市","防城港市"]; arr["安徽省"]=["芜湖市","合肥市","六安市","宿州市","阜阳市","安庆市","马鞍山市","蚌埠市","淮北市","淮南市","宣城市","黄山市","铜陵市","亳州市","池州市","巢湖市"," 滁州市"]; arr["北京市"]=["朝阳区","海淀区","通州区","房山区","丰台区","昌平区","大兴区","顺义区","西城区","延庆县","石景山区","宣武区","怀柔区","崇文区","密云县","东城区","平谷区","门头沟区"]; //插入省 for(var i in arr) { $("#province").append("<option>"+i+"</option>"); } //当省发生改变时插入市 $("#province").change(function(){ var v=$("#province").val(); $("#city").html("");//清空市列表 for(var i in arr[v]) { $("#city").append("<option>" + arr[v][i] + "</option>"); } }); //清空请选择文本 $("#province").focus(function(){ var v=$("#province").val(); if(v=="请选择省/城市"){ $("#province").children().eq(0).remove(); } }); });
相关文章推荐
- 《Motion Design for iOS》(二十一)
- JavaScript学习1
- SurfaceFlinger学习
- java was started but returned code=13的问题探究
- Photoshop利用画笔和图层样式制作著名游戏中的绿猪图标
- * { Box-sizing: Border-box } FTW
- jmeter 压力测试各种值的意思 --吞吐量 样本
- Maven之(七)pom.xml配置文件详解
- iOS学习之——init
- Generic Xcode Archive 解决方案
- Maven之(七)pom.xml配置文件详解
- checkedListBox1(转)
- (转) unity 在移动平台中,文件操作路径详解
- sql SELECT时的with(nolock)选项说明
- OJ之栈的基本使用
- 使用json文件为当前类文件属性赋值(org.nutz.json.Json)
- AngularJs加载闪烁问题 ng-cloak
- 关于服务端技术如何学
- ==与equals()的区别
- Eclipse下配置Maven