js表单验证

...

在HTML里输入表单的基本数据

    

        

            

            

            

        
        

            

            

                

                    

                        
通行证用户名：
                        
 @163.com
                        

                    
                    

                        
登录密码：
                        

                        

                    
                    

                        
重复登录密码：
                        

                        

                    
                    

                        
性别：
                        
男 女 
                    
                    

                        
真实姓名：
                        

                    
                    

                        
昵称：
                        

                        

                    
                    

                        
关联手机号：
sh
                        

                        

                    
                    

                        
保密邮箱：
                        

                        

                    
                    

                        

                        

                    
                
            
            

        
        

            

            

            

        
    

在JS中完成表单验证

function $(elementId) {
return document.getElementById(elementId);

}

• //当获取焦点的时候要提示用户输入的格式信息
  function userNameFocus() {
  //根据userNameId获取到节点元素(对象)
  var userNameId = $("userNameId");
  userNameId.className = "import_prompt";
  userNameId.innerHTML = "要以英文字母或者是数字开头且长度为4~18";
  }
  

• function userNameBlur() {
  //根据Id获取到input节点元素
  var userName = $("userName");
  //根据id获取到div节点元素
  var userNameId = $("userNameId");
  if (userName.value == "") {
    userNameId.className = "error_prompt";
    userNameId.innerHTML = "用户名不能为空!!!";
    return false;
   }
  

• //用户名是有规则的：由字母，数字，下划线，点，减号组成的。只能以字母或数字开头或结尾
  //要使用正则表达式来验证上方数据
  var reg = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/
  

•  if (reg.test(userName.value) == false) {
   userNameId.className = "error_prompt";
   userNameId.innerHTML = "只能以字母或数字开头或结尾!!!";
   return false;
  }
  userNameId.className = "ok_prompt";
  userNameId.innerHTML = "用户名验证成功!!!";
  return true;
  }
  

• //手机号验证
  function telFocus() {
  var telId = $("telId");
  telId.className = "import_prompt";
  telId.innerHTML = "要以数字开头且长度为11";
  }
  

• function telBlur() {
  var tel = $("tel");
  var telId = $("telId");
  if (tel.value == "") {
    telId.className = "error_prompt";
    telId.innerHTML = "手机号不能为空!!!";
    return false;
   }
  

• var phone = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;;
  

• if (phone.test(tel.value) == false) {
   telId.className = "error_prompt";
   telId.innerHTML = "只能以数字开头或结尾!!!";
   return false;
  }
  telId.className = "ok_prompt";
  telId.innerHTML = "手机号验证成功!!!";
  return true;
  
  }