jquery強大的驗證控件jquery-validate

時間 2019-11-05

原文原文鏈接

1、介紹和規則

通常在作開發時候，有不少方式要對前端提交的表單進行驗證，有不少都是本身寫的，不過學習了jquer-validate這個工具，感受用起來確實方便。php

首先在對應的頁面引入咱們jquery和所須要空間的js
html

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>

默認的驗證規則：前端

(1)、required:true               必輸字段
(2)、remote:"remote-valid.jsp"   使用ajax方法調用remote-valid.jsp驗證輸入值
(3)、email:true                  必須輸入正確格式的電子郵件
(4)、url:true                    必須輸入正確格式的網址
(5)、date:true                   必須輸入正確格式的日期，日期校驗ie6出錯，慎用
(6)、dateISO:true                必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)、number:true                 必須輸入合法的數字(負數，小數)
(8)、digits:true                 必須輸入整數
(9)、creditcard:true             必須輸入合法的信用卡號
(10)、equalTo:"#password"        輸入值必須和#password相同
(11)、accept:                    輸入擁有合法後綴名的字符串（上傳文件的後綴）
(12)、maxlength:5                輸入長度最可能是5的字符串(漢字算一個字符)
(13)、minlength:10               輸入長度最小是10的字符串(漢字算一個字符)
(14)、rangelength:[5,10]         輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(15)、range:[5,10]               輸入值必須介於 5 和 10 之間
(16)、max:5                      輸入值不能大於5
(17)、min:10                     輸入值不能小於10

另外對於radio和checkbox、select的須要在對應的input或者select裏面加上class="{"對應的驗證方式"}"jquery

通常來講這三個在項目中用的比較多的是必選或者必填就是「required:true」;git

關於異步驗證，說白了就是使用ajax來進行驗證：web

須要使用：remoteajax

具體規則：shell

remote: {
    url: "url地址",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {            return $("#name").val();
        }
    }
}

遠程地址只能輸出 "true" 或 "false"，不能有其餘輸出。數據庫

至於爲何遠程地址只能輸出"true" 或 "false"，能夠這樣理解，這個工具的做用就是驗證，也就是 "是"或"非",我的用的ajax驗證比較多的就是去驗證數據庫名稱是否重複json

其實使用方式也是很簡單的

在rules裏面寫上須要驗證的東西，就像下面input框爲必填，不能爲空。和input框的長度最小爲4

messages:裏面填寫驗證失敗須要提示的信息內容。也能夠不在messages裏面寫，默認的提示是英文，也能夠本身只作一個語言包進行替換，我在開發時候直接在下面寫的~.~

rules:{    
        name:{
            required:true,
            minlength:4
            }
        }
 messages:{
        name:{
            required:"請輸入您的名字",
            minlength:"用戶名必須4個字母"
            }
          }

2、例子

下面是本身寫的一個簡單的例子：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery-validation</title>
</head>
<style>
.error{
color:#F00;    
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<body>
    <form method="post" action="#" id="the_from" class="the-from">
    <p>
    <label>姓名</label>
    <input id="cname" name="name" type="text" />
    </p>
    <p>
    <label>郵箱</label>
    <input id="cemail" name="email" type="text" />
    </p>
        <label>情感狀態</label>
    <select class="{required:true}" id="select" name="select">
    <option value="">請選擇</option>
    <option value="1">單身狗</option>
    <option value="0">虐狗的</option>
    </select>
    </p>

    <p>
    <label>備註</label>
    <textarea id="comment" name="comment"></textarea>
    </p>
    <p>

     <p>
      <input id="submit" type="submit" value="提交">
    </p>
    
    </form>
</body>
</html>
<script>
$.validator.setDefaults({
    submitHandler: function() {
   $('#the_from').submit();
    }
});
$().ready(function() {
    $("#the_from").validate({
        rules:{    
        name:{
            required:true,
            minlength:4,
            remote:{
                    url:"ajax.php",
                    type:"post",
                    dataType:"json",
                    data:{
                        id:function(){return "1";},
                        val:function(){return $("#cname").val();}
                    }
                } 
            },
        email:{
            required:true,
            email: true
            },
        comment:{
            required:true
            },
        select:{
            required:true
            }
        },
        messages:{
            name:{
            required:"請輸入您的名字",
            minlength:"用戶名必須4個字母",
        remote:"ajax說名稱不能重複"        
                },
        email:{
            required:"郵箱不能爲空",
            email: "請輸入正確的郵箱"
            },
        comment:{
            required:"請填寫您的備註"
            },
        select:{
            required:"請填寫感情狀態"
            }
            
        }    
        });
});
</script>

對應的ajax驗證代碼（ajax.php）:

<?php
$id=$_POST['id'];
$val=$_POST['val'];
/*
 *通常在開發過程當中用的時候都是去驗證數據庫比較多
 *先假如咱們的業務規則名字是不能是123456的
 */
 $result="123456";
 if($val==$result){
     exit("false");
 }else{
     exit("true");
 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。