表單數據驗證方法(一)—— 使用validate.js實現表單數據驗證


摘要:使用validate.js在前端實現表單數據提交前的驗證

   好久沒寫博客了,真的是罪過,以后不能這樣了,只學習不思考,學的都是白搭,希望在博客園能記錄下自己學習的點滴,雖然記錄的都是些淺顯的技術,但能起到鞏固自己和稍微幫助一下和我一樣的菜雞也是不錯的,哈哈,不好意思,閑話扯多了。

  今天想把之前學的表單驗證的方法復習一遍,因為明天的工作中要用到,而且好久沒復習了,都快忘記了。

  現在是學的ASP.NET,關於表單驗證,目前知道的,除了以前那種傻瓜式的每個表單選項都用一個函數去驗證之外,有兩種方法是比較方便的,今天先介紹一下第一種,在前端實現表單驗證的方法——基於validate.js的表單驗證方法。

注意喲,以下我都用截圖的方式掛出代碼,然后最后會把完整代碼貼出來,提供復制粘貼,小伙伴不要急着敲哦!

1.下載和引入validate.js

  首先,我們需要下載一份validate.js文件,這個文件可以去JQuery官網或者csdn等網站下載。

  

 

下載好之后,新建一個html文件,然后先后將jquery.js文件和validate.js引入html代碼,我這里新建一個名為formCheck.html的文件,如下圖所示:

 

 這里為了待會的表單表現的好看一些,我引入了layui.css的樣式文件。

2.建立表單

  3.使用validate.js實現表單數據的驗證

 同樣,我們直接看代碼截圖:

 

 除了這些檢驗方式,validate.js里還封裝了包括郵箱格式驗證,電話號碼格式驗證等驗證犯法,使用方法和上圖中的number一致,想進一步了解的同學可以自行查看具體的js內容哦。上圖中的代碼,rules部分限定了輸入數據的規范,message則設定了錯誤提示信息。

4.查看結果

 

   這種驗證方法還是非常簡單和方便的,借助一個js插件,輕松搞定數據驗證,希望這個簡單的demo能幫到何我一樣的菜雞哦,先寫到這里啦,要睡了,晚安哦!

 

對了,差點忘了奉上完整代碼了,請笑納:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>前端表單驗證</title>
 6         <link rel="stylesheet" type="text/css" href="layui-v2.3.0/layui/css/layui.css"/>
 7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 8         <script type="text/javascript" src="js/jquery.validate.js"></script>
 9         <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script>
10         <style type="text/css">
11             #form-box{
12                 width: 700px;
13                 height: 300px;
14                 margin: auto;
15                 position: relative;
16                 top: 100px;
17             }
18         </style>
19     </head>
20     <body>
21         <form action="formCheck.html" method="post">
22             <div id="form-box" class="layui-form layui-form-pane">
23                 <div class="layui-form-item">
24                     <label class="layui-form-label">用戶名</label>
25                     <div class="layui-input-inline">
26                        <input type="text" name="userName" class="layui-input">
27                     </div>       
28                  </div>
29                  <div class="layui-form-item">
30                     <label class="layui-form-label">密碼</label>
31                     <div class="layui-input-inline">
32                        <input type="text" name="passWord" class="layui-input">
33                     </div>   
34                  </div>
35                  <div class="layui-form-item">                   
36                        <input type="submit" name="" id="frmSubmit" value="提交" class="layui-btn layui-btn-primary layui-btn-normal" />
37                  </div>
38             </div>
39         </form>
40     </body>
41     <script type="text/javascript">
42         $(function(){
43                 $("form").validate({
44                     rules: {
45                         userName: {
46                             required: true, //該項表示該字段為必填項
47                             maxlength: 5 //表示該字段的最大長度為5
48                         },
49                         passWord: {
50                             required: true,
51                             number: true  //表示該字段必須為數字
52                         }
53                     },
54                     messages: {
55                         userName: {
56                             required: "*必填",
57                             maxlength: "*最多5個字符"
58                         },
59                         passWord: {
60                             required: "*必填",
61                             number: "*必須是合法的數字"
62                         }
63                     }                    
64                 })        
65             });
66     </script>
67 </html>

 

 

 希望能幫到你哦!

我的eMail:3074596466@qq.com

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM