HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)

HTML表单验证(含用户名，密码，邮箱，手机号，验证码)

前几天对表单注册有点感兴趣，于是在课余时间了解了一些注册表单的验证方法，自己也试着做了一个表单的验证(前端验证)，很low，各位童鞋应该都看得懂，话不多说，上代码

    
    
	
	



    

        
USER REGISTER
        
新用户注册
    
    

        

            

                

                    

                       
用户名
                        

                            
                            
                            
                        
                    
                    

                        
密码
                        

							
								
								
								
								
							
							
                        
                    
                    

                        
请确认密码
                        

							
								
								
								
								
							
                            
                        
                    
                    

                        
电子邮箱
                        

                         
                        
                        
                    
                    

                        
ID-代号
                        

                    
                    

                        
手机号
                        

                        
                        
                    
                    

                        
性别
                        

                             男
                             女
                        
                    
                    

                        
出生日期
                        

                    
                    

                        
喜欢的游戏
                        

                            
                            治愈
                            射击
                            塔防
                        
                        
                    
                    

                        
住址
                        

                    
                    

                        
个人简介
                        

                    
                    

                        
你的座右铭
                        
 
                    
                    

                        
验证码
                        

                        
                         
                        
                    
                    

                        

                           
                          
                        
                    
                
            
            
已有账号?      立即登录
        
    

关于js的正则校验，再此给个示例，有需要用到的童鞋可以自取

 			var nickname_target = $(".wrap_account_set input[name=nickname]");
            var nickname = nickname_target.val();

            var mobile_target = $(".wrap_account_set input[name=mobile]");
            var mobile = mobile_target.val();

            var email_target = $(".wrap_account_set input[name=email]");
            var email = email_target.val();

            var login_name_target = $(".wrap_account_set input[name=login_name]");
            var login_name = login_name_target.val();

            var login_pwd_target = $(".wrap_account_set input[name=login_pwd]");
            var login_pwd = login_pwd_target.val();

            var name = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{4,8}$/;//4-8位登陆用户名的校验(英文可包含数字)
            var phone = /^(?:\+?86)?1\d{10}$/  //11位手机号的校验
            var eml = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/   //邮箱的校验
            var pwd = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,12}$/   //8-12位登录密码，包含数字特殊字符，大小写的校验

            if( !name.exec(nickname) ){
                common_ops.tip( "请输入符合规范的姓名~~",nickname_target );
                return false;
            }

            if( !phone.exec(mobile)){
                common_ops.tip( "请输入符合规范的手机号码~~",mobile_target );
                return false;
            }

            if(  !eml.exec(email)){
                common_ops.tip( "请输入符合规范的邮箱~~",email_target );
                return false;
            }

            if( !name.exec(login_name)){
                common_ops.tip( "请输入符合规范的登录用户名~~",login_name_target );
                return false;
            }

            if( !pwd.exec(login_pwd)){
                common_ops.tip( "请输入符合规范的登录密码~~",login_pwd_target );
                return false;
            }

js 验证部分的内容解释都写在了注释里，各位童鞋可自行了解，如果想了解更多的验证方法，可以点击这里验证1还有这个验证2，这些都是我自己找的

效果图看这：

没有用户输入之前

获取用户输入之后

数据提交结果

表单注册所用到的图片文件（注意要放对文件路径）

对的提示：

验证码：

• 个人感悟： 感觉前端验证的安全性非常的低，虽然我用的验证方法非常的low（有比较高级的验证方法）,普通的正则，再加上几个if,else语句就搞定了，会一点点技术的童鞋都可以直接绕过或者直接改验证源码，大佬可能会说（正经人谁搞前端验证啊…），哈哈哈哈哈，唉，菜鸡落泪！学习这些验证方法其实还是让我收获了很多东西的，比如说有哪些验证类型，以及如何破解这些验证，同样也拓宽了我的学习视野（学的东西还是太狭隘了，有些东西还是要有一定的了解的，比如说前后端…）
• 我将js代码和css代码分开放置在各自的文件夹中，需要下载该测试内容的童鞋可以点击下方链接

百度网盘源码下载

• 总结：学习终究还是要有恒心，不能三天打鱼两天晒网，终究还是浪费了太多时间，唉，自律打卡第一天，学习！学习！学习！
• 搞点轻松点的好东西