zoukankan      html  css  js  c++  java
  • 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性
    1. [代码] 常见的注册表单元素     

    <form action="#" method="post"  id="regist"> 
        <table cellpadding="0" cellspacing="0" border="0" class="form_table"> 
            <tr> 
                <td valign="middle" align="right">用户名:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">真实姓名:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">密码:</td> 
                <td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd"  id="pwd"/> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">重复密码:</td> 
                <td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">年龄:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">电话:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">电子邮件:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td> 
            </tr> 
            <tr> 
                <td valign="middle" align="right">验证码:</td> 
                <td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td> 
                    </tr> 
        </table> 
        <p> <input type="submit" class="button" value="Submit &raquo;" />  <input type ="reset" class = "button"  value = "Reset &raquo;"> </p> 
     </form>
    2. [代码]HTML头部引入需要的函数库     

    <head> 
        <title>欢迎注册</title> 
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
        <script type="text/javascript" src="js/jquery-1.4.min.js"></script> 
        <script type="text/javascript" src="js/jquery.validate.js"></script> 
        <script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
    </head>http://www.huiyi8.com/flashjc/
    3. [代码]表单校验代码     
    <script type="text/javascript"> 
            //表单填写情况校验 
            $(function(){ //代表页面加载以后执行 
                $("#regist").validate( //此处的#regist是JQuery的选择器,代表了校验id为regist的Form 
                { flash教程 
                    rules: {//此处开始配置校验规则,下面会列出所有的校验规则 
                        username : "required", 
                        name : "required", 
                        pwd : {required:true,rangelength:[6,10]}, 
                        repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应 
                        age : {required:true,rangelength:[1,2]}, 
                        phone:{required:true,rangelength:[5,20]}, 
                        number:{required:true,}, 
                        email: {required:true,email: true,}, 
                    }, 
                    messages:{//自定义提示信息 
                        name:{required:"真实姓名不能为空!"}, 
                        pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"}, 
                        email:{required:"电子邮箱不能为空!"}, 
                    } 
                } 
            ); 
            }); 
    </script>

  • 相关阅读:
    BZOJ 1066 [SCOI2007]蜥蜴 (最大流)
    Codeforces 1092 D2 Great Vova Wall (Version 2) (栈)
    BZOJ 1046 [HAOI2007]上升序列(LIS + 贪心)
    牛客练习赛34 D little w and Exchange(归纳)
    BZOJ 1042 [HAOI2008]硬币购物(完全背包+容斥)
    GTMD并查集!
    2018icpc南京现场赛-G Pyramid(打标找规律+逆元)
    drwxr-xr-x 2 root root 4096 06-29 14:30 Test 分段解释
    Linux里面非常重要的目录
    点击 触发 事件 的 jQuery 写法样式
  • 原文地址:https://www.cnblogs.com/xkzy/p/3890500.html
Copyright © 2011-2022 走看看