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>

  • 相关阅读:
    gzip是一种数据格式,deflate是一种压缩算法
    js 实现图片上传 续
    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
    HTTPS简介----
    回归测试
    HTTP 返回码 400
    js 实现 一张图片的上传
    121. Best Time to Buy and Sell Stock
    119. Pascal's Triangle II
    118. Pascal's Triangle
  • 原文地址:https://www.cnblogs.com/xkzy/p/3890500.html
Copyright © 2011-2022 走看看