DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 常用javascript表單驗證匯總
常用javascript表單驗證匯總
編輯：關於JavaScript     

實例講解：驗證輸入的是否是數字，是否滿足數字位數，如果錯誤，並進行友情提醒。

效果圖：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p>請輸入數字。如果輸入值不是數字，浏覽器會彈出提示框。</p>

<input id="demo" type="text">

<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""){
alert("輸入不能為空");
return;
}

if(isNaN(x)){
alert("請輸入數字");
return;
}

if(x.length!=6){
alert("請輸入6位數字");
return;
}

}
</script>
<button type="button" onclick="myFunction()">點擊這裡</button>
</body>
</html>

上面這個實例包含了許多常用的表單驗證的代碼，下面分享給大家：

1、驗證表單

2、驗證昵稱

3、計算昵稱長度

4、驗證昵稱是否存在

5、驗證手機號

6、驗證密碼

7、驗證郵箱

8、驗證驗證碼

9、判斷是否選中

 注冊驗證為例：

<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

//驗證表單
     function vailForm(){
       var form = jQuery("#editForm");
       if(!vailNickName())return;
       if(!vailPhone())return;
       if(!vailPwd())return;
       if(!vailConfirmPwd())return;
       if(!vailEmail())return;
       if(!vailCode())return;
       if(!vailAgree())return;
       form.submit();
     }

//驗證昵稱
     function vailNickName(){
       var nickName = jQuery("#nickName").val();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/;
       var length = getNickNameLength();
       if(nickName == ''){
         message = "昵稱不能為空！";
       }else if(length<4||length>16){
         message = "昵稱為4-16個字符！";
       } else if(checkNickNameIsExist()){
         message = "該昵稱已經存在，請重新輸入！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#nickNameP").html("");
         jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#nickName").focus();
       }else{
         jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#nickNameP").html("");
         jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該昵稱可用");
       }
       return flag;
     }

//計算昵稱長度
     function getNickNameLength(){
       var nickName = jQuery("#nickName").val();
       var len = 0;
      for (var i = 0; i < nickName.length; i++) {
         var a = nickName.charAt(i);

　　　　　　//函數格式：stringObj.match(rgExp) stringObj為字符串必選 rgExp為正則表達式必選項
　　　　　　//返回值：如果能匹配則返回結果數組，如果不能匹配返回null
         if (a.match(/[^\x00-\xff]/ig) != null){
          len += 2;
        }else{
          len += 1;
        }
      }
       return len;
     }

//驗證昵稱是否存在
     function checkNickNameIsExist(){
       var nickName = jQuery("#nickName").val();
       var flag = false;
       jQuery.ajax(
        { url: "checkNickName?t=" + (new Date()).getTime(),
          data:{nickName:nickName},
          dataType:"json",
             type:"GET",
             async:false,
             success:function(data) {
             var status = data.status;
             if(status == "1"){
               flag = true;
             }
           }
      });
      return flag;
     }

//驗證手機號
     function vailPhone(){
       var phone = jQuery("#phone").val();
       var flag = false;
       var message = "";
       //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
       var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;
       if(phone == ''){
         message = "手機號碼不能為空！";
       }else if(phone.length !=11){
         message = "請輸入有效的手機號碼！";
       }else if(!myreg.test(phone)){
         message = "請輸入有效的手機號碼！";
       }else if(checkPhoneIsExist()){
         message = "該手機號碼已經被綁定！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#phoneP").html("");
         jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#phone").focus();
       }else{
         jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#phoneP").html("");
         jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該手機號碼可用");
       }
       return flag;
     }

//驗證手機號是否存在
       function checkPhoneIsExist(){
         var phone = jQuery("#phone").val();
         var flag = true;
         jQuery.ajax(
          { url: "checkPhone?t=" + (new Date()).getTime(),
            data:{phone:phone},
            dataType:"json",
               type:"GET",
               async:false,
               success:function(data) {
               var status = data.status;
               if(status == "0"){
                 flag = false;
               }
             }
        });
        return flag;
       }

 //驗證密碼
     function vailPwd(){
       var password = jQuery("#password").val();
       var flag = false;
       var message = "";
       var patrn=/^\d+$/;
       if(password ==''){
         message = "密碼不能為空！";
       }else if(password.length<6 || password.length>16){
         message = "密碼6-16位！";
       }else if(patrn.test(password)){
         message = "密碼不能全是數字！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#passwordP").html("");
         jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#password").focus();
       }else{
         jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#passwordP").html("");
         jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該密碼可用");
       }
       return flag;
     }

//驗證確認密碼
     function vailConfirmPwd(){
       var confirmPassword = jQuery("#confirm_password").val();
       var patrn=/^\d+$/;
       var password = jQuery("#password").val();
       var flag = false;
       var message = "";
       if(confirmPassword == ''){
         message = "請輸入確認密碼！";
       }else if(confirmPassword != password){
         message = "二次密碼輸入不一致，請重新輸入！";
       }else if(patrn.test(password)){
         message = "密碼不能全是數字！";
       }else {
         flag = true;
       }
       if(!flag){
         jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#confirmPasswordP").html("");
         jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#confirm_password").focus();
       }else{
         jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#confirmPasswordP").html("");
         jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密碼正確");
       }
       return flag;
     }

//驗證郵箱
     function vailEmail(){
       var email = jQuery("#email").val();
       var flag = false;
       var message = "";
       var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
       if(email ==''){
         message = "郵箱不能為空！";
       }else if(!myreg.test(email)){
         message = "請輸入有效的郵箱地址！";
       }else if(checkEmailIsExist()){
         message = "該郵箱地址已經被注冊！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#emailP").html("");
         jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#email").focus();
       }else{
         jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#emailP").html("");
         jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該郵箱可用");
       }
       return flag;
     }

//驗證郵箱是否存在
     function checkEmailIsExist(){
       var email = jQuery("#email").val();
       var flag = false;
       jQuery.ajax(
        { url: "checkEmail?t=" + (new Date()).getTime(),
          data:{email:email},
          dataType:"json",
             type:"GET",
             async:false,
             success:function(data) {
             var status = data.status;
             if(status == "1"){
               flag = true;
             }
           }
      });
      return flag;
     }

//驗證驗證碼

 function vailCode(){
       var randCode = jQuery("#randCode").val();
       var flag = false;
       var message = "";
       if(randCode == ''){
         message = "請輸入驗證碼！";
       }else if(!checkCode()){
         message = "驗證碼不正確！";
       }else{
         flag = true;
       }
       if(!flag){
         jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");
         jQuery("#randCodeP").html("");
         jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
         //jQuery("#randCode").focus();
       }else{
         jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");
         jQuery("#randCodeP").html("");
         jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>");
       }
       return flag;
     }

//檢查隨機驗證碼是否正確
     function checkCode(){
       var randCode = jQuery("#randCode").val();
       var flag = false;
       jQuery.ajax(
        { url: "checkRandCode?t=" + (new Date()).getTime(),
          data:{randCode:randCode},
          dataType:"json",
             type:"GET",
             async:false,
             success:function(data) {
             var status = data.status;
             if(status == "1"){
               flag = true;
             }
           }
      });
      return flag;
     } 

//判斷是否選中
 function vailAgree(){
       if(jQuery("#agree").is(":checked")){
         return true;
       }else{
         alert("請確認是否閱讀並同意XX協議");
       }
       return false;
     }
function delHtmlTag(str){
  var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html標記
  var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前後空格
  return result.replace(/\s/g,"");//去除文章中間空格
}

以上就是實用的javascript表單驗證，希望大家喜歡。

關於JavaScript
javascript實現帶下拉子菜單的導航菜單效果
本文實例講述了javascript實現帶下拉子菜單的導航菜單效果。分享給大家供大家參考。具體實現方法
js跨域資源共享 基礎篇
本文詳細介紹了javascript跨域資源共享，供大家參考，具體內容如下1.為什麼提出跨域資源共享(
js客戶端快捷鍵管理類的較完整實現和應用
復制代碼 代碼如下: //一個快捷鍵對象 function KeyOne(id, keys, dom

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
node.js中的fs.readlink方法教程使用說明詳解 JavaScript function函數種類詳解 基於JavaScript實現樹形下拉框 JavaScript創建一個歡迎cookie彈出窗實現代碼 js控制excel打印完美解決方案 理解js對象繼承的N種模式 JavaScript的this關鍵字的理解 javascript object array方法使用詳解 精通Javascript系列之數值計算 js使用split函數按照多個字符對字符串進行分割的方法
熱門推薦
用Javascript實現Windows任務管理器的代碼 深入淺析JavaScript中的constructor js window.onload 加載多個函數和追加函數詳解 深入淺析JavaScript中的作用域和上下文 JavaScript中日期函數的相關操作知識 JavaScript數據結構鏈表知識詳解 JavaScript實現網頁截圖功能 預加載css或javascript的js代碼 Douban的jquery使用分析
大家都在看
JS實現的左側豎向滑動菜單效果代碼 JS自動適應的圖片彈窗實例 XML認證教程，第 3 部分: 名稱空間 js網頁中的(運行代碼)功能實現思路 javascript結合CSS實現蘋果開關按鈕特效 XML認證教程，第 6 部分: XML Schema 固定表格行列(expression)在IE下適用 Javascript實例教程(10) 創建後退按鈕
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved