表单验证详解编程语言

1、验证小例子

//表单验证

function checkForm(){

    //01.验证用户名

    var userName=getById(“userName”);

    if(userName.value==””){

        alert(“用户名不能为空！”)

        userName.focus();  //让文本框获取焦点

        return false;

    }

    //02.验证密码

    var pwd=getById(“pwd”);

    if(pwd.value.length<6){

        alert(“密码不能小于6位！”)

        pwd.focus();  //让文本框获取焦点

        return false;

    }

    //03.验证密码和重复密码是否一致

    var repwd=getById(“repwd”);

    if(repwd.value!=pwd.value){

        alert(“两次密码不一致！”)

        repwd.focus();  //让文本框获取焦点

        return false;

    }

    //04.验证昵称

    var nickName=getById(“nickName”);

    if(nickName.value==””){

        alert(“昵称不能为空！”)

        nickName.focus();  //让文本框获取焦点

        return false;

    }

    //05.验证邮箱

    var email=getById(“email”);

    if(email.value.indexOf(“@”)==-1||email.value.indexOf(“.”)==-1){

        alert(“邮箱格式不正确！”)

        email.focus();  //让文本框获取焦点

        return false;

    }

 

}

// 传一个id  返回一个dom对象

function  getById(obj){

    return document.getElementById(obj);

}

2、即时验证

/**value

 * Created by honglin.jiang on 2014/10/14.

 */

//获取DOM对象

function e(str){

    return document.getElementById(str);

}

//动态添加有样式的内容

//ok_prompt 为提示文字验证正确的className

//error_prompt  为提示文字验证错误时className

//import_prompt  为提示文字提示时className

 

function appendHtml(obj,str,className){

    obj.innerHTML = str;

    obj.className  = className;

}

//验证表单

function checkForm(){

     //把所有的验证 写成一个数组

    var  ids=[“checkUserName()”,”checkPwd()”,”checkRepwd()”,”checkNikeName()”,”checkTel()”,”checkEmail()”];

    //定义变量 记录 返回true的方法

    var num=0;

    for(var i=0;i<ids.length;i++){

        if(eval(ids[i])){

            num++;

        }

    }

    //所有的验证都通过  才是表单提交

    return (ids.length==num)?true:false;

 

}

//获得鼠标时触发的事件

//import_prompt  为提示文字提示时className

function focusShow(inputId,msg){

   var  dom  =e(inputId);  //获取dom对象

    var  dmsg  =e(inputId+”Id”); //获取提示信息的dom对象

    dmsg.style.borderColor=”green”;

    appendHtml(dmsg,msg,”import_prompt”);

}

//验证用户名输入

function checkUserName(){

    var  flag=false;

     var  userName= e(“userName”);

     var  userNameId= e(“userNameId”);

    if(userName.value==””){

        userName.style.borderColor=”red”;

        appendHtml(userNameId,”用户名不能为空”,”error_prompt”);

    }else{

        userName.style.borderColor=”green”;

        appendHtml(userNameId,”输入正确”,”ok_prompt”);

        flag=true;

    }

  return flag;

}

 

//验证密码

function checkPwd(){

    var  flag=false;

    var  pwd= e(“pwd”);

    var  pwdId= e(“pwdId”);

    if(pwd.value==””){

        pwd.style.borderColor=”red”;

        appendHtml(pwdId,”密码不能为空”,”error_prompt”);

    }else{

        pwd.style.borderColor=”green”;

        appendHtml(pwdId,”输入正确”,”ok_prompt”);

        flag=true;

    }

    return flag;

  

}

//验证重复密码

function checkRepwd(){

    var flag = true;

    var odom = e(“repwd”);//输入框DOM对象

    var omsg = e(“repwdId”);//信息提示DOM对象

    if(odom.value == “”){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”确认密码不能为空”,”error_prompt”);

        flag =  false;

    }else if(odom.value !=  e(“pwd”).value){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”两次输入的密码不一致”,”error_prompt”);

        flag =  false;

    } else{

        odom.style.borderColor = “green”;

        appendHtml(omsg,”输入正确”,”ok_prompt”);

        flag =  true;

    }

    return flag;

}

 

//验证昵称

function checkNikeName(){

    var flag = true;

    var odom = e(“nickName”);//输入框DOM对象

    var omsg = e(“nickNameId”);//信息提示DOM对象

    if(odom.value == “”){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”昵称不能为空，请输入昵称”,”error_prompt”);

        flag =  false;

    }else{

        odom.style.borderColor = “green”;

        appendHtml(omsg,”输入正确”,”ok_prompt”);

        flag =  true;

    }

    return flag;

}

 

//验证手机

function checkTel(){

    var flag = true;

    var odom = e(“tel”);//输入框DOM对象

    var omsg = e(“telId”);//信息提示DOM对象

    if(odom.value == “”){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”关联手机号码不能为空，请输入关联手机号码”,”error_prompt”);

        flag =  false;

    }else{

        odom.style.borderColor = “green”;

        appendHtml(omsg,”输入正确”,”ok_prompt”);

        flag =  true;

    }

    return flag;

}

//验证邮箱

function checkEmail(){

    var flag = true;

    var odom = e(“email”);//输入框DOM对象

    var omsg = e(“emailId”);//信息提示DOM对象

    if(odom.value == “”){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”保密邮箱不能为空，请输入保密邮箱”,”error_prompt”);

        flag =  false;

    }else if( odom.value.indexOf(“@”)==-1  || odom.value.indexOf(“.”)==-1 ){

        odom.style.borderColor = “red”;

        appendHtml(omsg,”[email protected]“,”error_prompt”);

        flag =  false;

    }else{

        odom.style.borderColor = “green”;

        appendHtml(omsg,”输入正确”,”ok_prompt”);

        flag =  true;

    }

    return flag;

}

3、正则表达式验证用户名

  <script  type=”text/javascript”>
   function  checkForm(){
       var userName=  document.getElementById(“userName”);
       //书写正则表达式  用户名只能是字母或者数字并且在4到16个长度  包含4,16
       var reg=”^[a-zA-Z0-9]{4,16}$”;
      //var reg1=”^[a-zA-Z0-9]?$”;
       var regExp=new RegExp(reg);
       alert( regExp.test(userName.value)?”用户名正确”:”不匹配”);
   }
    </script>
</head>
<body>
<form onsubmit=”return checkForm()”>
<input type=”text” name=”userName” id=”userName”>
    <input  type=”submit”  value=”验证”>
</form>
</body>

4、正则表达式验证邮箱

 <script  type=”text/javascript”>

   function  checkForm(){

       var email=  document.getElementById(“email”);

       //书写正则表达式 邮箱

       var reg=/^/w+@/w+(/./w+){1,2}$/;

       var regExp=new RegExp(reg);

       alert( regExp.test(email.value)?”邮箱正确”:”不匹配”);

   }

    </script>

</head>

<body>

<form onsubmit=”return checkForm()”>

<input type=”text” name=”email” id=”email”>

    <input  type=”submit”  value=”验证”>

</form>

</body>

5、正则表达式验证手机号

  <title>正则验证手机号</title>

    <script  type=”text/javascript”>

   function  checkForm(){

       var phone=  document.getElementById(“phone”);

       //书写正则表达式  手机

       var reg=/^(13|14|15|17|18)/d{9}$/;

       var regExp=new RegExp(reg);

       alert( regExp.test(phone.value)?”手机号正确”:”不匹配”);

   }

    </script>

</head>

<body>

<form onsubmit=”return checkForm()”>

<input type=”text” name=”phone” id=”phone”>

    <input  type=”submit”  value=”验证”>

</form>

</body>

6、正则与String对象

 <script  type=”text/javascript”>
          window.onload=function(){
              var str=”this  is a big dog!”;
              //alert(str.match(/big/));查找 str 字符串中的 “big” 字符串
              //alert(str.search(/i/));查找   str 字符串中的 “i” 字符串所在的位置
              //alert(str.replace(/i/g,”I”));把str字符串中的  i  字符替换成  大写的  I 字符
              //alert(str.replace(“i”,”I”));
              //alert(str.split(” “)); 把str字符串中的按空格进行分割 返回数组
              alert(str.split(//s+/));
          }
    </script>
</head>
<body>
</body>