zoukankan      html  css  js  c++  java
  • 使用jQuery的validation插件实现表单校验

    前端表单校验:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>表单校验(使用validation插件实现)</title>
     6     <script src="../jslib/jquery-1.11.0.js"></script>
     7     <script src="../jslib/jquery.validate.js"></script>
     8     <script src="../jslib/messages_zh.js"></script>
     9 
    10     <script>
    11         $(function () {
    12             $("#formid").validate({
    13                 rules:{
    14                     username:{
    15                         required:true
    16                     },
    17                     password:{
    18                         required:true,
    19                         rangelength:[6,10]
    20                     },
    21                     repassword:{
    22                         required:true,
    23                         equalTo:"[name='password']"
    24                     },
    25                     height:{
    26                         required:true,
    27                         min:[180]
    28                     },
    29                     age:{
    30                         required:true,
    31                         range:[18,56]
    32                     }
    33                 },
    34                 messages:{
    35                     username:{
    36                         required:"不能为空"
    37                     },
    38                     password:{
    39                         rangelenght:"密码长度必须在在6-10个字符之间"
    40                     },
    41                     height:{
    42                         min:"身高必须在180以上"
    43                     },
    44                     age:{
    45                         range:"年龄必须在在18岁到56岁之间"
    46                     }
    47                 }
    48             });
    49         });
    50     </script>
    51 </head>
    52 <body>
    53 <form id="formid" action="#">
    54 
    55     <!--不能为空-->
    56     用户名:<input type="text" name="username"/> <br/>
    57 
    58     <!--长度在6-10个字符之间-->
    59     密码:<input type="text" name="password"/> <br />
    60 
    61     重复密码:<input type="text" name="repassword"/> <br />
    62 
    63     <!--大于180cm-->
    64     身高:<input type="text" name="height"/> <br />
    65 
    66     <!--在18岁到56岁之间-->
    67     年龄:<input type="text" name="age"/> <br />
    68 
    69     邮箱:<input type="text" name="email"/> <br />
    70 
    71     <input type="submit" value="提交"/>
    72 </form>
    73 </body>
    74 </html>
  • 相关阅读:
    Linux 的硬链接与软链接
    Django补遗(一)
    Django之Form组件
    Django进阶(三)
    Django进阶(二)
    Web请求提交页面--防重提交
    Lucene的搭建(3)
    Lucene的搭建(2)
    Redis-cluster集群搭建
    Redis安装
  • 原文地址:https://www.cnblogs.com/gdwkong/p/8267451.html
Copyright © 2011-2022 走看看