javaScript表單驗證

時間  2019-11-11
標籤 javascript 表單 驗證 欄目 JavaScript 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表單驗證</title>
    <script type="text/javascript">
        function checkForm(){  //表單驗證
            //01.獲取用戶的輸入
          var userName= document.getElementById("userName");
            //02.驗證
            if(userName.value==""||userName.value.length<6){
                alert("用戶名不能爲空！用戶名長度不足！");
                return false;
            }
         return  true;
        }
    </script>

</head>
<body>
<form action="#" method="post" onsubmit="return checkForm()">
   <input type="text" name="userName"  id="userName"  placeholder="請輸入用戶名">
   <input type="submit" value="提交">

</form>

</body>
</html>
01.表單驗證小例子

 

//表單驗證
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);
}
02.驗證網易通行證01

 

/**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,"郵件格式必須包含@和.","error_prompt");
        flag =  false;
    }else{
        odom.style.borderColor = "green";
        appendHtml(omsg,"輸入正確","ok_prompt");
        flag =  true;
    }
    return flag;
}
03.網易通行證即時驗證

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正則表達式</title>
    <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>
</html>
04.正則表達式驗證用戶名

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正則驗證郵箱</title>
    <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>
</html>
05.正則驗證郵箱

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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>
</html>
06.正則驗證手機號

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>正則與String對象</title>
    <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>
</html>
07.正則與String對象
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程